[{"data":1,"prerenderedAt":3827},["ShallowReactive",2],{"article-filepond-crop-vue":3},{"id":4,"title":5,"body":6,"category":3814,"createdAt":3816,"description":3817,"extension":3818,"index":3819,"meta":3820,"navigation":385,"path":3821,"publish":385,"seo":3822,"series":3819,"seriesTitle":3819,"stem":3823,"tag":3824,"thumbnail":3825,"updatedAt":3816,"__hash__":3826},"articles\u002Farticles\u002Ffilepond-crop-vue.md","Vue filepondとCropper.jsの連携とファイルアップロード",{"type":7,"value":8,"toc":3794},"minimark",[9,21,24,30,39,292,296,312,315,318,321,325,333,344,350,357,361,368,446,460,481,485,492,995,998,1001,1004,1019,1043,1293,1303,1307,1310,1316,1322,1493,1497,1500,1992,2015,2020,2023,2037,2040,2043,2422,2434,2437,2440,2454,2457,2467,2601,2620,2623,2626,2629,2632,2641,3042,3048,3054,3070,3081,3085,3098,3762,3765,3768,3771,3778,3781,3790],[10,11,12,13,20],"p",{},"こんにちはjunです。皆さんはファイルアップロードをJSで実装したことありますか？最近のwebサービスではアバターだったり、記事に画像のせるなど画像をアップロードするのが当たり前になっています。そのため仕事でもファイルのアップロード機能を実装しますが、Ajaxを用いてのFileインターフェースの扱いなどUIの構築が面倒なので、ライブラリを使っています。私は",[14,15,19],"a",{"href":16,"rel":17},"https:\u002F\u002Fpqina.nl\u002Ffilepond\u002F",[18],"nofollow","filepond","と言うものを使用して、複数アップロードやファイルのフロントバリデーションを実装します。VanillaだけでなくVue.jsやReactとの連携がしやすいので重宝しています。",[10,22,23],{},"今回の記事は「Filepondのアップロードを行う前にフロントでトリミングしたものをアップロードする」という単純にアップロードするだけでなく、画像を加工してからUPする機能を実装します。Line,Facebook、Twitterなどではプロフィール画像をアップロードする際に、どんな写真でも任意の範囲で１：１でトリミングできる機能があります。意外とユーザーは自身のスマホでトリミングする機能があるのを知らなかったり、機器によっては提供されていないor面倒だったりします。UX的な観点からもフロントでのトリミング機能があると便利です。",[25,26],"image-render",{":src":27,":width":28,":center":29},"'filepond-crop-vue\u002Ftwitter.png'","'50%'","true",[10,31,32,33,38],{},"この機能を実装するにあたり、",[14,34,37],{"href":35,"rel":36},"https:\u002F\u002Ffengyuanchen.github.io\u002Fcropperjs\u002F",[18],"Cropper.js","のVue版を使用します。アップロードはfilepondを使用するので両者ライブラリの連携を行います。意外と苦労したので記事にしたいと思います。フロントエンド はVue CLIを用います。バックエンド側の解説はしません。バージョン情報は以下の通りです。",[40,41,46],"pre",{"className":42,"code":43,"language":44,"meta":45,"style":45},"language-json shiki shiki-themes material-theme-ocean","\"devDependencies\": {\n \"vue\": \"^2.6.12\",\n \"vue-filepond\": \"^6.0.3\",\n},\n\"dependencies\": {\n \"filepond\": \"^4.30.3\",\n \"filepond-plugin-file-validate-type\": \"^1.2.6\",\n \"filepond-plugin-image-crop\": \"^2.0.6\",\n \"filepond-plugin-image-edit\": \"^1.6.3\",\n \"filepond-plugin-image-preview\": \"^4.6.10\",\n \"filepond-plugin-image-transform\": \"^3.8.7\",\n \"vue-cropperjs\": \"^4.2.0\",\n}\n","json","",[47,48,49,71,97,118,126,140,160,181,202,223,244,265,286],"code",{"__ignoreMap":45},[50,51,54,58,62,64,68],"span",{"class":52,"line":53},"line",1,[50,55,57],{"class":56},"sAklC","\"",[50,59,61],{"class":60},"sfyAc","devDependencies",[50,63,57],{"class":56},[50,65,67],{"class":66},"s0W1g",": ",[50,69,70],{"class":56},"{\n",[50,72,74,77,81,83,86,89,92,94],{"class":52,"line":73},2,[50,75,76],{"class":56}," \"",[50,78,80],{"class":79},"sJ14y","vue",[50,82,57],{"class":56},[50,84,85],{"class":56},":",[50,87,88],{"class":56}," \"",[50,90,91],{"class":60},"^2.6.12",[50,93,57],{"class":56},[50,95,96],{"class":56},",\n",[50,98,100,102,105,107,109,111,114,116],{"class":52,"line":99},3,[50,101,76],{"class":56},[50,103,104],{"class":79},"vue-filepond",[50,106,57],{"class":56},[50,108,85],{"class":56},[50,110,88],{"class":56},[50,112,113],{"class":60},"^6.0.3",[50,115,57],{"class":56},[50,117,96],{"class":56},[50,119,121,124],{"class":52,"line":120},4,[50,122,123],{"class":56},"}",[50,125,96],{"class":66},[50,127,129,131,134,136,138],{"class":52,"line":128},5,[50,130,57],{"class":56},[50,132,133],{"class":60},"dependencies",[50,135,57],{"class":56},[50,137,67],{"class":66},[50,139,70],{"class":56},[50,141,143,145,147,149,151,153,156,158],{"class":52,"line":142},6,[50,144,76],{"class":56},[50,146,19],{"class":79},[50,148,57],{"class":56},[50,150,85],{"class":56},[50,152,88],{"class":56},[50,154,155],{"class":60},"^4.30.3",[50,157,57],{"class":56},[50,159,96],{"class":56},[50,161,163,165,168,170,172,174,177,179],{"class":52,"line":162},7,[50,164,76],{"class":56},[50,166,167],{"class":79},"filepond-plugin-file-validate-type",[50,169,57],{"class":56},[50,171,85],{"class":56},[50,173,88],{"class":56},[50,175,176],{"class":60},"^1.2.6",[50,178,57],{"class":56},[50,180,96],{"class":56},[50,182,184,186,189,191,193,195,198,200],{"class":52,"line":183},8,[50,185,76],{"class":56},[50,187,188],{"class":79},"filepond-plugin-image-crop",[50,190,57],{"class":56},[50,192,85],{"class":56},[50,194,88],{"class":56},[50,196,197],{"class":60},"^2.0.6",[50,199,57],{"class":56},[50,201,96],{"class":56},[50,203,205,207,210,212,214,216,219,221],{"class":52,"line":204},9,[50,206,76],{"class":56},[50,208,209],{"class":79},"filepond-plugin-image-edit",[50,211,57],{"class":56},[50,213,85],{"class":56},[50,215,88],{"class":56},[50,217,218],{"class":60},"^1.6.3",[50,220,57],{"class":56},[50,222,96],{"class":56},[50,224,226,228,231,233,235,237,240,242],{"class":52,"line":225},10,[50,227,76],{"class":56},[50,229,230],{"class":79},"filepond-plugin-image-preview",[50,232,57],{"class":56},[50,234,85],{"class":56},[50,236,88],{"class":56},[50,238,239],{"class":60},"^4.6.10",[50,241,57],{"class":56},[50,243,96],{"class":56},[50,245,247,249,252,254,256,258,261,263],{"class":52,"line":246},11,[50,248,76],{"class":56},[50,250,251],{"class":79},"filepond-plugin-image-transform",[50,253,57],{"class":56},[50,255,85],{"class":56},[50,257,88],{"class":56},[50,259,260],{"class":60},"^3.8.7",[50,262,57],{"class":56},[50,264,96],{"class":56},[50,266,268,270,273,275,277,279,282,284],{"class":52,"line":267},12,[50,269,76],{"class":56},[50,271,272],{"class":79},"vue-cropperjs",[50,274,57],{"class":56},[50,276,85],{"class":56},[50,278,88],{"class":56},[50,280,281],{"class":60},"^4.2.0",[50,283,57],{"class":56},[50,285,96],{"class":56},[50,287,289],{"class":52,"line":288},13,[50,290,291],{"class":56},"}\n",[293,294,295],"h2",{"id":295},"実装目標",[297,298,299,303,306,309],"ol",{},[300,301,302],"li",{},"任意の画像をブラウザにアップロード",[300,304,305],{},"画像を編集できるUIを用意し、任意でトリミングできる様にする",[300,307,308],{},"任意の位置、倍率でオリジナルの画像を１：１でトリミング",[300,310,311],{},"トリミングした画像をサーバーにアップロードする。",[10,313,314],{},"以上の機能を持ったアップローダーが実装目標です。",[293,316,317],{"id":317},"初期設定",[10,319,320],{},"ではまず最初に必要なライブラリをインストールしていきましょう。とりあえず今はVue CLIの設定とfilepondだけインストールしましょう。Vue CLIのセットアップ解説は省きます。",[322,323,324],"h3",{"id":324},"ライブラリインストール",[40,326,331],{"className":327,"code":329,"language":330},[328],"language-text","vue create filepond_cropper\ncd filepond_cropper\n\nnpm install filepond filepond-plugin-file-validate-type filepond-plugin-image-crop filepond-plugin-image-preview --save\nnpm install vue-filepond@6.0.3 --save-dev\n","text",[47,332,329],{"__ignoreMap":45},[10,334,335,336,338,339],{},"このインストールで気をつけたいのが",[47,337,104],{},"のバージョンです。そのままインストールするとVue3に対応した最新版がインストールされ、Vue2系では動作しません。",[14,340,343],{"href":341,"rel":342},"https:\u002F\u002Fgithub.com\u002Fpqina\u002Fvue-filepond",[18],"本家Githubでも注意書きがあります。",[345,346,347],"blockquote",{},[10,348,349],{},"If you want to use Vue FilePond with Vue 2, please use v6 of this plugin.",[10,351,352,353,356],{},"そのため ",[47,354,355],{},"npm install vue-filepond@6.0.3 --save-dev","としてバージョン６を入れる様にしてください。",[322,358,360],{"id":359},"vueレンダリング準備","Vueレンダリング準備",[10,362,363,364,367],{},"ライブラリのインストールが終わりましたら、最初にある",[47,365,366],{},"src\u002Fmain.js","でvueでfilepondを使用できる様にします。",[40,369,374],{"className":370,"code":371,"filename":372,"language":373,"meta":45,"style":45},"language-javascript shiki shiki-themes material-theme-ocean","import Vue from 'vue'\n\nimport vueFilePond from 'vue-filepond';\nimport FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type\u002Fdist\u002Ffilepond-plugin-file-validate-type.esm.js';\nimport FilePondPluginImagePreview from 'filepond-plugin-image-preview\u002Fdist\u002Ffilepond-plugin-image-preview.esm.js';\nimport FilePondPluginImageCrop from 'filepond-plugin-image-crop\u002Fdist\u002Ffilepond-plugin-image-crop.esm';\nconst FilePond = vueFilePond(FilePondPluginFileValidateType, FilePondPluginImagePreview,FilePondPluginImageCrop);\nVue.component(FilePond);\n\nVue.config.productionTip = false\n\nnew Vue({\n render: h => h(App),\n}).$mount('#app')\n","main.js","javascript",[47,375,376,381,387,392,397,402,407,412,417,421,426,430,435,440],{"__ignoreMap":45},[50,377,378],{"class":52,"line":53},[50,379,380],{},"import Vue from 'vue'\n",[50,382,383],{"class":52,"line":73},[50,384,386],{"emptyLinePlaceholder":385},true,"\n",[50,388,389],{"class":52,"line":99},[50,390,391],{},"import vueFilePond from 'vue-filepond';\n",[50,393,394],{"class":52,"line":120},[50,395,396],{},"import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type\u002Fdist\u002Ffilepond-plugin-file-validate-type.esm.js';\n",[50,398,399],{"class":52,"line":128},[50,400,401],{},"import FilePondPluginImagePreview from 'filepond-plugin-image-preview\u002Fdist\u002Ffilepond-plugin-image-preview.esm.js';\n",[50,403,404],{"class":52,"line":142},[50,405,406],{},"import FilePondPluginImageCrop from 'filepond-plugin-image-crop\u002Fdist\u002Ffilepond-plugin-image-crop.esm';\n",[50,408,409],{"class":52,"line":162},[50,410,411],{},"const FilePond = vueFilePond(FilePondPluginFileValidateType, FilePondPluginImagePreview,FilePondPluginImageCrop);\n",[50,413,414],{"class":52,"line":183},[50,415,416],{},"Vue.component(FilePond);\n",[50,418,419],{"class":52,"line":204},[50,420,386],{"emptyLinePlaceholder":385},[50,422,423],{"class":52,"line":225},[50,424,425],{},"Vue.config.productionTip = false\n",[50,427,428],{"class":52,"line":246},[50,429,386],{"emptyLinePlaceholder":385},[50,431,432],{"class":52,"line":267},[50,433,434],{},"new Vue({\n",[50,436,437],{"class":52,"line":288},[50,438,439],{}," render: h => h(App),\n",[50,441,443],{"class":52,"line":442},14,[50,444,445],{},"}).$mount('#app')\n",[10,447,448,451,452,455,456,459],{},[47,449,450],{},"vueFilePond","があれば一応すぐに使用できますがここではfilepondのプラグインを使用します。プラグインを",[47,453,454],{},"import","して ",[47,457,458],{},"vueFilePond()","の引数に当てていきます。",[461,462,463,469,475],"ul",{},[300,464,465,468],{},[47,466,467],{},"FilePondPluginFileValidateType","はファイルの拡張子を検証します。ここでは画像（jpg,png,gif）以外を許可しない様にします。",[300,470,471,474],{},[47,472,473],{},"FilePondPluginImagePreview","はブラウザにアップロードしたファイルをプレビューできる様にします。",[300,476,477,480],{},[47,478,479],{},"FilePondPluginImageCrop","はブラウザにアップロードしたファイルを任意のアスペクト比でトリミングしたプレビューを表示します。（実際にトリミングはしてくれない。現状はあくまでトリミング情報を提供してプレビュー表示を変えるだけ）",[293,482,484],{"id":483},"まずはfilepondにアップロードできるようにする","まずはFilepondにアップロードできるようにする",[10,486,487,488,491],{},"プラグインを読み込み、",[47,489,490],{},"src\u002FApp.vue","を編集します。",[40,493,496],{"className":494,"code":495,"filename":490,"language":80,"meta":45,"style":45},"language-vue shiki shiki-themes material-theme-ocean","\u003Ctemplate>\n \u003Cdiv>\n \u003Cfile-pond ref=\"filepond\" v-bind=\"attrs\"\u002F>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\u003Cscript>\nimport ja from 'filepond\u002Flocale\u002Fja-ja';\nimport VueCropper from 'vue-cropperjs';\nexport default {\n name:'fileuploader',\n data(){\n return{\n files:[],\n }\n },\n methods:{\n onError(res){\n console.error(res)\n },\n },\n computed:{\n attrs(){\n let apiserver = '\u002Fapi\u002Fv1\u002Ffile\u002Favater';\n return {\n allowMultiple:false,\n 'accepted-file-types':'image\u002Fjpeg,image\u002Fpng,image\u002Fgif',\n instantUpload:false,\n imageCropAspectRatio:'1:1',\n server:{\n process: {\n url:apiserver,\n method: 'POST',\n withCredentials: true,\n onerror:(response) => this.onError(response)\n },\n },\n ...ja\n }\n }\n },\n}\n\u003C\u002Fscript>\n",[47,497,498,510,520,555,564,573,582,605,622,633,649,657,664,676,681,687,696,712,732,738,743,751,759,780,788,802,824,836,853,861,871,884,901,914,944,950,956,965,971,976,981,986],{"__ignoreMap":45},[50,499,500,503,507],{"class":52,"line":53},[50,501,502],{"class":56},"\u003C",[50,504,506],{"class":505},"s-wAU","template",[50,508,509],{"class":56},">\n",[50,511,512,515,518],{"class":52,"line":73},[50,513,514],{"class":56}," \u003C",[50,516,517],{"class":505},"div",[50,519,509],{"class":56},[50,521,522,525,528,531,534,536,538,540,543,545,547,550,552],{"class":52,"line":99},[50,523,524],{"class":56}," \u003C",[50,526,527],{"class":505},"file-pond",[50,529,530],{"class":79}," ref",[50,532,533],{"class":56},"=",[50,535,57],{"class":56},[50,537,19],{"class":60},[50,539,57],{"class":56},[50,541,542],{"class":79}," v-bind",[50,544,533],{"class":56},[50,546,57],{"class":56},[50,548,549],{"class":60},"attrs",[50,551,57],{"class":56},[50,553,554],{"class":56},"\u002F>\n",[50,556,557,560,562],{"class":52,"line":120},[50,558,559],{"class":56}," \u003C\u002F",[50,561,517],{"class":505},[50,563,509],{"class":56},[50,565,566,569,571],{"class":52,"line":128},[50,567,568],{"class":56},"\u003C\u002F",[50,570,506],{"class":505},[50,572,509],{"class":56},[50,574,575,577,580],{"class":52,"line":142},[50,576,502],{"class":56},[50,578,579],{"class":505},"script",[50,581,509],{"class":56},[50,583,584,587,590,593,596,599,602],{"class":52,"line":162},[50,585,454],{"class":586},"s6cf3",[50,588,589],{"class":66}," ja ",[50,591,592],{"class":586},"from",[50,594,595],{"class":56}," '",[50,597,598],{"class":60},"filepond\u002Flocale\u002Fja-ja",[50,600,601],{"class":56},"'",[50,603,604],{"class":56},";\n",[50,606,607,609,612,614,616,618,620],{"class":52,"line":183},[50,608,454],{"class":586},[50,610,611],{"class":66}," VueCropper ",[50,613,592],{"class":586},[50,615,595],{"class":56},[50,617,272],{"class":60},[50,619,601],{"class":56},[50,621,604],{"class":56},[50,623,624,627,630],{"class":52,"line":204},[50,625,626],{"class":586},"export",[50,628,629],{"class":586}," default",[50,631,632],{"class":56}," {\n",[50,634,635,638,640,642,645,647],{"class":52,"line":225},[50,636,637],{"class":505}," name",[50,639,85],{"class":56},[50,641,601],{"class":56},[50,643,644],{"class":60},"fileuploader",[50,646,601],{"class":56},[50,648,96],{"class":56},[50,650,651,654],{"class":52,"line":246},[50,652,653],{"class":505}," data",[50,655,656],{"class":56},"(){\n",[50,658,659,662],{"class":52,"line":267},[50,660,661],{"class":586}," return",[50,663,70],{"class":56},[50,665,666,669,671,674],{"class":52,"line":288},[50,667,668],{"class":505}," files",[50,670,85],{"class":56},[50,672,673],{"class":505},"[]",[50,675,96],{"class":56},[50,677,678],{"class":52,"line":442},[50,679,680],{"class":56}," }\n",[50,682,684],{"class":52,"line":683},15,[50,685,686],{"class":56}," },\n",[50,688,690,693],{"class":52,"line":689},16,[50,691,692],{"class":505}," methods",[50,694,695],{"class":56},":{\n",[50,697,699,702,705,709],{"class":52,"line":698},17,[50,700,701],{"class":505}," onError",[50,703,704],{"class":56},"(",[50,706,708],{"class":707},"s7ZW3","res",[50,710,711],{"class":56},"){\n",[50,713,715,718,721,725,727,729],{"class":52,"line":714},18,[50,716,717],{"class":66}," console",[50,719,720],{"class":56},".",[50,722,724],{"class":723},"sdLwU","error",[50,726,704],{"class":505},[50,728,708],{"class":66},[50,730,731],{"class":505},")\n",[50,733,735],{"class":52,"line":734},19,[50,736,737],{"class":56}," },\n",[50,739,741],{"class":52,"line":740},20,[50,742,686],{"class":56},[50,744,746,749],{"class":52,"line":745},21,[50,747,748],{"class":505}," computed",[50,750,695],{"class":56},[50,752,754,757],{"class":52,"line":753},22,[50,755,756],{"class":505}," attrs",[50,758,656],{"class":56},[50,760,762,765,768,771,773,776,778],{"class":52,"line":761},23,[50,763,764],{"class":79}," let",[50,766,767],{"class":66}," apiserver",[50,769,770],{"class":56}," =",[50,772,595],{"class":56},[50,774,775],{"class":60},"\u002Fapi\u002Fv1\u002Ffile\u002Favater",[50,777,601],{"class":56},[50,779,604],{"class":56},[50,781,783,786],{"class":52,"line":782},24,[50,784,785],{"class":586}," return",[50,787,632],{"class":56},[50,789,791,794,796,800],{"class":52,"line":790},25,[50,792,793],{"class":505}," allowMultiple",[50,795,85],{"class":56},[50,797,799],{"class":798},"sbqyR","false",[50,801,96],{"class":56},[50,803,805,808,811,813,815,817,820,822],{"class":52,"line":804},26,[50,806,807],{"class":56}," '",[50,809,810],{"class":505},"accepted-file-types",[50,812,601],{"class":56},[50,814,85],{"class":56},[50,816,601],{"class":56},[50,818,819],{"class":60},"image\u002Fjpeg,image\u002Fpng,image\u002Fgif",[50,821,601],{"class":56},[50,823,96],{"class":56},[50,825,827,830,832,834],{"class":52,"line":826},27,[50,828,829],{"class":505}," instantUpload",[50,831,85],{"class":56},[50,833,799],{"class":798},[50,835,96],{"class":56},[50,837,839,842,844,846,849,851],{"class":52,"line":838},28,[50,840,841],{"class":505}," imageCropAspectRatio",[50,843,85],{"class":56},[50,845,601],{"class":56},[50,847,848],{"class":60},"1:1",[50,850,601],{"class":56},[50,852,96],{"class":56},[50,854,856,859],{"class":52,"line":855},29,[50,857,858],{"class":505}," server",[50,860,695],{"class":56},[50,862,864,867,869],{"class":52,"line":863},30,[50,865,866],{"class":505}," process",[50,868,85],{"class":56},[50,870,632],{"class":56},[50,872,874,877,879,882],{"class":52,"line":873},31,[50,875,876],{"class":505}," url",[50,878,85],{"class":56},[50,880,881],{"class":66},"apiserver",[50,883,96],{"class":56},[50,885,887,890,892,894,897,899],{"class":52,"line":886},32,[50,888,889],{"class":505}," method",[50,891,85],{"class":56},[50,893,595],{"class":56},[50,895,896],{"class":60},"POST",[50,898,601],{"class":56},[50,900,96],{"class":56},[50,902,904,907,909,912],{"class":52,"line":903},33,[50,905,906],{"class":505}," withCredentials",[50,908,85],{"class":56},[50,910,911],{"class":798}," true",[50,913,96],{"class":56},[50,915,917,920,923,926,929,932,935,938,940,942],{"class":52,"line":916},34,[50,918,919],{"class":723}," onerror",[50,921,922],{"class":56},":(",[50,924,925],{"class":707},"response",[50,927,928],{"class":56},")",[50,930,931],{"class":79}," =>",[50,933,934],{"class":56}," this.",[50,936,937],{"class":723},"onError",[50,939,704],{"class":505},[50,941,925],{"class":66},[50,943,731],{"class":505},[50,945,947],{"class":52,"line":946},35,[50,948,949],{"class":56}," },\n",[50,951,953],{"class":52,"line":952},36,[50,954,955],{"class":56}," },\n",[50,957,959,962],{"class":52,"line":958},37,[50,960,961],{"class":56}," ...",[50,963,964],{"class":66},"ja\n",[50,966,968],{"class":52,"line":967},38,[50,969,970],{"class":56}," }\n",[50,972,974],{"class":52,"line":973},39,[50,975,680],{"class":56},[50,977,979],{"class":52,"line":978},40,[50,980,686],{"class":56},[50,982,984],{"class":52,"line":983},41,[50,985,291],{"class":56},[50,987,989,991,993],{"class":52,"line":988},42,[50,990,568],{"class":56},[50,992,579],{"class":505},[50,994,509],{"class":56},[10,996,997],{},"上記の通りでfilepondのコンポーネント表示されます。（スタイルなどは適宜調整してください）",[25,999],{":src":1000,":width":28,":center":29},"'filepond-crop-vue\u002Ffilepond.png'",[322,1002,1003],{"id":1003},"設定内容",[10,1005,1006,1007,1010,1011,1014,1015,1018],{},"filepondの公式ではテンプレートに",[47,1008,1009],{},"props","を設定していますが日本語化や色々設定が多いので、",[47,1012,1013],{},"computed","に記載した方がいいです。また日本語化する場合は",[47,1016,1017],{},"import ja from 'filepond\u002Flocale\u002Fja-ja';"," とインポートして展開します。",[10,1020,1021,1022,1024,1025,1030,1031,1034,1035,1038,1039,1042],{},"そしてこれらの",[47,1023,1009],{},"は",[14,1026,1029],{"href":1027,"rel":1028},"https:\u002F\u002Fpqina.nl\u002Ffilepond\u002Fdocs\u002Fapi\u002Finstance\u002Fproperties\u002F",[18],"本家vanilla版ドキュメント","で記載されている",[47,1032,1033],{},"properties","と同じ項目です。またfilepondのメソッドにアクセスする場合は",[47,1036,1037],{},"this.$refs.pond","と",[47,1040,1041],{},"ref","の値を使用します。今回設定した項目の解説は以下の通りです。",[40,1044,1048],{"className":1045,"code":1046,"language":1047,"meta":45,"style":45},"language-js shiki shiki-themes material-theme-ocean","return {\n \u002F\u002F 複数ファイルのアップロードを許可するか\n allowMultiple:false,\n\n \u002F\u002F 許可するmime\n 'accepted-file-types':'image\u002Fjpeg,image\u002Fpng,image\u002Fgif',\n\n \u002F\u002F ブラウザにアップしたとき、すぐにサーバーにアップロードするか。デフォルトはTrueなので注意\n instantUpload:false,\n\n \u002F\u002F FilePondPluginImageCrop有効時のアスペクト比。\n imageCropAspectRatio:'1:1',\n\n \u002F\u002F アップロードする際のajaxの設定\n server:{\n \u002F\u002F アップロードするときの設定\n process: {\n \u002F\u002F アップロード先URL\n url:apiserver,\n\n \u002F\u002F アップロードのメソッド（processはデフォルトでPOST）\n method: 'POST',\n\n \u002F\u002F withCredentialsを有効化\n withCredentials: true,\n\n \u002F\u002F エラー時のコールバック\n onerror:(response) => this.onError(response)\n },\n },\n\n \u002F\u002F 日本語化\n ...ja\n}\n","js",[47,1049,1050,1057,1063,1074,1078,1083,1102,1106,1111,1122,1126,1131,1146,1150,1155,1162,1167,1176,1181,1192,1196,1201,1216,1220,1225,1236,1240,1245,1265,1269,1273,1277,1282,1289],{"__ignoreMap":45},[50,1051,1052,1055],{"class":52,"line":53},[50,1053,1054],{"class":586},"return",[50,1056,632],{"class":56},[50,1058,1059],{"class":52,"line":73},[50,1060,1062],{"class":1061},"sC9rS"," \u002F\u002F 複数ファイルのアップロードを許可するか\n",[50,1064,1065,1068,1070,1072],{"class":52,"line":99},[50,1066,1067],{"class":505}," allowMultiple",[50,1069,85],{"class":56},[50,1071,799],{"class":798},[50,1073,96],{"class":56},[50,1075,1076],{"class":52,"line":120},[50,1077,386],{"emptyLinePlaceholder":385},[50,1079,1080],{"class":52,"line":128},[50,1081,1082],{"class":1061}," \u002F\u002F 許可するmime\n",[50,1084,1085,1088,1090,1092,1094,1096,1098,1100],{"class":52,"line":142},[50,1086,1087],{"class":56}," '",[50,1089,810],{"class":505},[50,1091,601],{"class":56},[50,1093,85],{"class":56},[50,1095,601],{"class":56},[50,1097,819],{"class":60},[50,1099,601],{"class":56},[50,1101,96],{"class":56},[50,1103,1104],{"class":52,"line":162},[50,1105,386],{"emptyLinePlaceholder":385},[50,1107,1108],{"class":52,"line":183},[50,1109,1110],{"class":1061}," \u002F\u002F ブラウザにアップしたとき、すぐにサーバーにアップロードするか。デフォルトはTrueなので注意\n",[50,1112,1113,1116,1118,1120],{"class":52,"line":204},[50,1114,1115],{"class":505}," instantUpload",[50,1117,85],{"class":56},[50,1119,799],{"class":798},[50,1121,96],{"class":56},[50,1123,1124],{"class":52,"line":225},[50,1125,386],{"emptyLinePlaceholder":385},[50,1127,1128],{"class":52,"line":246},[50,1129,1130],{"class":1061}," \u002F\u002F FilePondPluginImageCrop有効時のアスペクト比。\n",[50,1132,1133,1136,1138,1140,1142,1144],{"class":52,"line":267},[50,1134,1135],{"class":505}," imageCropAspectRatio",[50,1137,85],{"class":56},[50,1139,601],{"class":56},[50,1141,848],{"class":60},[50,1143,601],{"class":56},[50,1145,96],{"class":56},[50,1147,1148],{"class":52,"line":288},[50,1149,386],{"emptyLinePlaceholder":385},[50,1151,1152],{"class":52,"line":442},[50,1153,1154],{"class":1061}," \u002F\u002F アップロードする際のajaxの設定\n",[50,1156,1157,1160],{"class":52,"line":683},[50,1158,1159],{"class":505}," server",[50,1161,695],{"class":56},[50,1163,1164],{"class":52,"line":689},[50,1165,1166],{"class":1061}," \u002F\u002F アップロードするときの設定\n",[50,1168,1169,1172,1174],{"class":52,"line":698},[50,1170,1171],{"class":505}," process",[50,1173,85],{"class":56},[50,1175,632],{"class":56},[50,1177,1178],{"class":52,"line":714},[50,1179,1180],{"class":1061}," \u002F\u002F アップロード先URL\n",[50,1182,1183,1186,1188,1190],{"class":52,"line":734},[50,1184,1185],{"class":505}," url",[50,1187,85],{"class":56},[50,1189,881],{"class":66},[50,1191,96],{"class":56},[50,1193,1194],{"class":52,"line":740},[50,1195,386],{"emptyLinePlaceholder":385},[50,1197,1198],{"class":52,"line":745},[50,1199,1200],{"class":1061}," \u002F\u002F アップロードのメソッド（processはデフォルトでPOST）\n",[50,1202,1203,1206,1208,1210,1212,1214],{"class":52,"line":753},[50,1204,1205],{"class":505}," method",[50,1207,85],{"class":56},[50,1209,595],{"class":56},[50,1211,896],{"class":60},[50,1213,601],{"class":56},[50,1215,96],{"class":56},[50,1217,1218],{"class":52,"line":761},[50,1219,386],{"emptyLinePlaceholder":385},[50,1221,1222],{"class":52,"line":782},[50,1223,1224],{"class":1061}," \u002F\u002F withCredentialsを有効化\n",[50,1226,1227,1230,1232,1234],{"class":52,"line":790},[50,1228,1229],{"class":505}," withCredentials",[50,1231,85],{"class":56},[50,1233,911],{"class":798},[50,1235,96],{"class":56},[50,1237,1238],{"class":52,"line":804},[50,1239,386],{"emptyLinePlaceholder":385},[50,1241,1242],{"class":52,"line":826},[50,1243,1244],{"class":1061}," \u002F\u002F エラー時のコールバック\n",[50,1246,1247,1250,1252,1254,1256,1258,1260,1262],{"class":52,"line":838},[50,1248,1249],{"class":723}," onerror",[50,1251,922],{"class":56},[50,1253,925],{"class":707},[50,1255,928],{"class":56},[50,1257,931],{"class":79},[50,1259,934],{"class":56},[50,1261,937],{"class":723},[50,1263,1264],{"class":66},"(response)\n",[50,1266,1267],{"class":52,"line":855},[50,1268,737],{"class":56},[50,1270,1271],{"class":52,"line":863},[50,1272,686],{"class":56},[50,1274,1275],{"class":52,"line":873},[50,1276,386],{"emptyLinePlaceholder":385},[50,1278,1279],{"class":52,"line":886},[50,1280,1281],{"class":1061}," \u002F\u002F 日本語化\n",[50,1283,1284,1287],{"class":52,"line":903},[50,1285,1286],{"class":56}," ...",[50,1288,964],{"class":66},[50,1290,1291],{"class":52,"line":916},[50,1292,291],{"class":56},[10,1294,1295,1296,1299,1300,1302],{},"ひとまず上記の設定があり、サーバー側でURLが利用可能であれば一応アップロードが可能です。ただしこれだけではトリミングされません。（プレビューはトリミングされて表示されますが）\n",[47,1297,1298],{},"instantUpload","はデフォルトで",[47,1301,29],{},"であり、トリミング前にアップロードされますので注意が必要です。",[293,1304,1306],{"id":1305},"filepondとvue-cropperへの連携","Filepondとvue-cropperへの連携",[10,1308,1309],{},"ではアップロードはできたのでcropperと連携しましょう。新しくライブラリをインストールします。",[40,1311,1314],{"className":1312,"code":1313,"language":330},[328],"npm install filepond-plugin-image-edit filepond-plugin-image-transform vue-cropperjs --save\n",[47,1315,1313],{"__ignoreMap":45},[10,1317,1318,1319,1321],{},"cropperのVue版とfilepondの編集APIとトリミングしてくれるプラグインをインストールします。",[47,1320,372],{},"も変更します。",[40,1323,1325],{"className":1045,"code":1324,"filename":372,"language":1047,"meta":45,"style":45},"import vueFilePond from 'vue-filepond';\nimport FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type\u002Fdist\u002Ffilepond-plugin-file-validate-type.esm.js';\nimport FilePondPluginImagePreview from 'filepond-plugin-image-preview\u002Fdist\u002Ffilepond-plugin-image-preview.esm.js';\nimport FilePondPluginImageCrop from 'filepond-plugin-image-crop\u002Fdist\u002Ffilepond-plugin-image-crop.esm';\nimport FilePondPluginImageEdit from 'filepond-plugin-image-edit\u002Fdist\u002Ffilepond-plugin-image-edit.esm';　\u002F\u002F 追加\nimport FilePondPluginImageTransform from 'filepond-plugin-image-transform\u002Fdist\u002Ffilepond-plugin-image-transform.esm';　\u002F\u002F 追加\nconst FilePond = vueFilePond(FilePondPluginFileValidateType, FilePondPluginImagePreview,FilePondPluginImageCrop,FilePondPluginImageEdit,FilePondPluginImageTransform);\nVue.component(FilePond);\n",[47,1326,1327,1344,1362,1380,1398,1420,1440,1478],{"__ignoreMap":45},[50,1328,1329,1331,1334,1336,1338,1340,1342],{"class":52,"line":53},[50,1330,454],{"class":586},[50,1332,1333],{"class":66}," vueFilePond ",[50,1335,592],{"class":586},[50,1337,595],{"class":56},[50,1339,104],{"class":60},[50,1341,601],{"class":56},[50,1343,604],{"class":56},[50,1345,1346,1348,1351,1353,1355,1358,1360],{"class":52,"line":73},[50,1347,454],{"class":586},[50,1349,1350],{"class":66}," FilePondPluginFileValidateType ",[50,1352,592],{"class":586},[50,1354,595],{"class":56},[50,1356,1357],{"class":60},"filepond-plugin-file-validate-type\u002Fdist\u002Ffilepond-plugin-file-validate-type.esm.js",[50,1359,601],{"class":56},[50,1361,604],{"class":56},[50,1363,1364,1366,1369,1371,1373,1376,1378],{"class":52,"line":99},[50,1365,454],{"class":586},[50,1367,1368],{"class":66}," FilePondPluginImagePreview ",[50,1370,592],{"class":586},[50,1372,595],{"class":56},[50,1374,1375],{"class":60},"filepond-plugin-image-preview\u002Fdist\u002Ffilepond-plugin-image-preview.esm.js",[50,1377,601],{"class":56},[50,1379,604],{"class":56},[50,1381,1382,1384,1387,1389,1391,1394,1396],{"class":52,"line":120},[50,1383,454],{"class":586},[50,1385,1386],{"class":66}," FilePondPluginImageCrop ",[50,1388,592],{"class":586},[50,1390,595],{"class":56},[50,1392,1393],{"class":60},"filepond-plugin-image-crop\u002Fdist\u002Ffilepond-plugin-image-crop.esm",[50,1395,601],{"class":56},[50,1397,604],{"class":56},[50,1399,1400,1402,1405,1407,1409,1412,1414,1417],{"class":52,"line":128},[50,1401,454],{"class":586},[50,1403,1404],{"class":66}," FilePondPluginImageEdit ",[50,1406,592],{"class":586},[50,1408,595],{"class":56},[50,1410,1411],{"class":60},"filepond-plugin-image-edit\u002Fdist\u002Ffilepond-plugin-image-edit.esm",[50,1413,601],{"class":56},[50,1415,1416],{"class":56},";",[50,1418,1419],{"class":1061},"　\u002F\u002F 追加\n",[50,1421,1422,1424,1427,1429,1431,1434,1436,1438],{"class":52,"line":142},[50,1423,454],{"class":586},[50,1425,1426],{"class":66}," FilePondPluginImageTransform ",[50,1428,592],{"class":586},[50,1430,595],{"class":56},[50,1432,1433],{"class":60},"filepond-plugin-image-transform\u002Fdist\u002Ffilepond-plugin-image-transform.esm",[50,1435,601],{"class":56},[50,1437,1416],{"class":56},[50,1439,1419],{"class":1061},[50,1441,1442,1445,1448,1450,1453,1456,1459,1462,1464,1466,1468,1471,1473,1476],{"class":52,"line":162},[50,1443,1444],{"class":79},"const",[50,1446,1447],{"class":66}," FilePond ",[50,1449,533],{"class":56},[50,1451,1452],{"class":723}," vueFilePond",[50,1454,1455],{"class":66},"(FilePondPluginFileValidateType",[50,1457,1458],{"class":56},",",[50,1460,1461],{"class":66}," FilePondPluginImagePreview",[50,1463,1458],{"class":56},[50,1465,479],{"class":66},[50,1467,1458],{"class":56},[50,1469,1470],{"class":66},"FilePondPluginImageEdit",[50,1472,1458],{"class":56},[50,1474,1475],{"class":66},"FilePondPluginImageTransform)",[50,1477,604],{"class":56},[50,1479,1480,1483,1485,1488,1491],{"class":52,"line":183},[50,1481,1482],{"class":66},"Vue",[50,1484,720],{"class":56},[50,1486,1487],{"class":723},"component",[50,1489,1490],{"class":66},"(FilePond)",[50,1492,604],{"class":56},[322,1494,1496],{"id":1495},"編集uiの表示","編集UIの表示",[10,1498,1499],{},"まず編集ボタンを表示できる様にします。先程のfilepondの設定に編集用コールバックの設定を追加します。",[40,1501,1503],{"className":494,"code":1502,"filename":490,"language":80,"meta":45,"style":45},"\u003Cscript>\n\u002F\u002F 部分省略\nexport default {\n name:'fileuploader',\n data(){\n return{\n files:[],\n }\n },\n methods:{\n \u002F\u002F ...\n },\n computed:{\n \u002F\u002F 追加\n editor(){\n return {\n \u002F\u002F Called by FilePond to edit the image\n \u002F\u002F - should open your image editor\n \u002F\u002F - receives file object and image edit instructions\n open: (file, instructions) => {\n \u002F\u002F open editor here\n\n },\n\n \u002F\u002F Callback set by FilePond\n \u002F\u002F - should be called by the editor when user confirms editing\n \u002F\u002F - should receive output object, resulting edit information\n onconfirm: (data) => {},\n\n \u002F\u002F Callback set by FilePond\n \u002F\u002F - should be called by the editor when user cancels editing\n oncancel: () => {},\n\n \u002F\u002F Callback set by FilePond\n \u002F\u002F - should be called by the editor when user closes the editor\n onclose: () => {\n },\n }\n },\n attrs(){\n let apiserver = '\u002Fapi\u002Fv1\u002Ffile\u002Favater';\n return {\n imageEditEditor:this.editor, \u002F\u002F 追加\n allowMultiple:false,\n 'accepted-file-types':'image\u002Fjpeg,image\u002Fpng,image\u002Fgif',\n instantUpload:false,\n imageCropAspectRatio:'1:1',\n server:{\n process: {\n url:apiserver,\n method: 'POST',\n withCredentials: true,\n onerror:(response) => this.onError(response)\n },\n },\n ...ja\n }\n },\n \u002F\u002F ...\n },\n}\n\u003C\u002Fscript>\n",[47,1504,1505,1513,1518,1526,1540,1546,1552,1562,1566,1570,1576,1581,1585,1591,1596,1603,1609,1614,1619,1624,1648,1653,1657,1661,1665,1670,1675,1680,1699,1703,1707,1712,1726,1730,1734,1739,1752,1756,1760,1764,1770,1786,1792,1809,1820,1839,1850,1865,1872,1881,1892,1907,1918,1941,1946,1951,1958,1963,1968,1973,1978,1983],{"__ignoreMap":45},[50,1506,1507,1509,1511],{"class":52,"line":53},[50,1508,502],{"class":56},[50,1510,579],{"class":505},[50,1512,509],{"class":56},[50,1514,1515],{"class":52,"line":73},[50,1516,1517],{"class":1061},"\u002F\u002F 部分省略\n",[50,1519,1520,1522,1524],{"class":52,"line":99},[50,1521,626],{"class":586},[50,1523,629],{"class":586},[50,1525,632],{"class":56},[50,1527,1528,1530,1532,1534,1536,1538],{"class":52,"line":120},[50,1529,637],{"class":505},[50,1531,85],{"class":56},[50,1533,601],{"class":56},[50,1535,644],{"class":60},[50,1537,601],{"class":56},[50,1539,96],{"class":56},[50,1541,1542,1544],{"class":52,"line":128},[50,1543,653],{"class":505},[50,1545,656],{"class":56},[50,1547,1548,1550],{"class":52,"line":142},[50,1549,661],{"class":586},[50,1551,70],{"class":56},[50,1553,1554,1556,1558,1560],{"class":52,"line":162},[50,1555,668],{"class":505},[50,1557,85],{"class":56},[50,1559,673],{"class":505},[50,1561,96],{"class":56},[50,1563,1564],{"class":52,"line":183},[50,1565,680],{"class":56},[50,1567,1568],{"class":52,"line":204},[50,1569,686],{"class":56},[50,1571,1572,1574],{"class":52,"line":225},[50,1573,692],{"class":505},[50,1575,695],{"class":56},[50,1577,1578],{"class":52,"line":246},[50,1579,1580],{"class":1061}," \u002F\u002F ...\n",[50,1582,1583],{"class":52,"line":267},[50,1584,686],{"class":56},[50,1586,1587,1589],{"class":52,"line":288},[50,1588,748],{"class":505},[50,1590,695],{"class":56},[50,1592,1593],{"class":52,"line":442},[50,1594,1595],{"class":1061}," \u002F\u002F 追加\n",[50,1597,1598,1601],{"class":52,"line":683},[50,1599,1600],{"class":505}," editor",[50,1602,656],{"class":56},[50,1604,1605,1607],{"class":52,"line":689},[50,1606,785],{"class":586},[50,1608,632],{"class":56},[50,1610,1611],{"class":52,"line":698},[50,1612,1613],{"class":1061}," \u002F\u002F Called by FilePond to edit the image\n",[50,1615,1616],{"class":52,"line":714},[50,1617,1618],{"class":1061}," \u002F\u002F - should open your image editor\n",[50,1620,1621],{"class":52,"line":734},[50,1622,1623],{"class":1061}," \u002F\u002F - receives file object and image edit instructions\n",[50,1625,1626,1629,1631,1634,1637,1639,1642,1644,1646],{"class":52,"line":740},[50,1627,1628],{"class":723}," open",[50,1630,85],{"class":56},[50,1632,1633],{"class":56}," (",[50,1635,1636],{"class":707},"file",[50,1638,1458],{"class":56},[50,1640,1641],{"class":707}," instructions",[50,1643,928],{"class":56},[50,1645,931],{"class":79},[50,1647,632],{"class":56},[50,1649,1650],{"class":52,"line":745},[50,1651,1652],{"class":1061}," \u002F\u002F open editor here\n",[50,1654,1655],{"class":52,"line":753},[50,1656,386],{"emptyLinePlaceholder":385},[50,1658,1659],{"class":52,"line":761},[50,1660,955],{"class":56},[50,1662,1663],{"class":52,"line":782},[50,1664,386],{"emptyLinePlaceholder":385},[50,1666,1667],{"class":52,"line":790},[50,1668,1669],{"class":1061}," \u002F\u002F Callback set by FilePond\n",[50,1671,1672],{"class":52,"line":804},[50,1673,1674],{"class":1061}," \u002F\u002F - should be called by the editor when user confirms editing\n",[50,1676,1677],{"class":52,"line":826},[50,1678,1679],{"class":1061}," \u002F\u002F - should receive output object, resulting edit information\n",[50,1681,1682,1685,1687,1689,1692,1694,1696],{"class":52,"line":838},[50,1683,1684],{"class":723}," onconfirm",[50,1686,85],{"class":56},[50,1688,1633],{"class":56},[50,1690,1691],{"class":707},"data",[50,1693,928],{"class":56},[50,1695,931],{"class":79},[50,1697,1698],{"class":56}," {},\n",[50,1700,1701],{"class":52,"line":855},[50,1702,386],{"emptyLinePlaceholder":385},[50,1704,1705],{"class":52,"line":863},[50,1706,1669],{"class":1061},[50,1708,1709],{"class":52,"line":873},[50,1710,1711],{"class":1061}," \u002F\u002F - should be called by the editor when user cancels editing\n",[50,1713,1714,1717,1719,1722,1724],{"class":52,"line":886},[50,1715,1716],{"class":723}," oncancel",[50,1718,85],{"class":56},[50,1720,1721],{"class":56}," ()",[50,1723,931],{"class":79},[50,1725,1698],{"class":56},[50,1727,1728],{"class":52,"line":903},[50,1729,386],{"emptyLinePlaceholder":385},[50,1731,1732],{"class":52,"line":916},[50,1733,1669],{"class":1061},[50,1735,1736],{"class":52,"line":946},[50,1737,1738],{"class":1061}," \u002F\u002F - should be called by the editor when user closes the editor\n",[50,1740,1741,1744,1746,1748,1750],{"class":52,"line":952},[50,1742,1743],{"class":723}," onclose",[50,1745,85],{"class":56},[50,1747,1721],{"class":56},[50,1749,931],{"class":79},[50,1751,632],{"class":56},[50,1753,1754],{"class":52,"line":958},[50,1755,955],{"class":56},[50,1757,1758],{"class":52,"line":967},[50,1759,970],{"class":56},[50,1761,1762],{"class":52,"line":973},[50,1763,737],{"class":56},[50,1765,1766,1768],{"class":52,"line":978},[50,1767,756],{"class":505},[50,1769,656],{"class":56},[50,1771,1772,1774,1776,1778,1780,1782,1784],{"class":52,"line":983},[50,1773,764],{"class":79},[50,1775,767],{"class":66},[50,1777,770],{"class":56},[50,1779,595],{"class":56},[50,1781,775],{"class":60},[50,1783,601],{"class":56},[50,1785,604],{"class":56},[50,1787,1788,1790],{"class":52,"line":988},[50,1789,785],{"class":586},[50,1791,632],{"class":56},[50,1793,1795,1798,1801,1804,1806],{"class":52,"line":1794},43,[50,1796,1797],{"class":505}," imageEditEditor",[50,1799,1800],{"class":56},":this.",[50,1802,1803],{"class":66},"editor",[50,1805,1458],{"class":56},[50,1807,1808],{"class":1061}," \u002F\u002F 追加\n",[50,1810,1812,1814,1816,1818],{"class":52,"line":1811},44,[50,1813,793],{"class":505},[50,1815,85],{"class":56},[50,1817,799],{"class":798},[50,1819,96],{"class":56},[50,1821,1823,1825,1827,1829,1831,1833,1835,1837],{"class":52,"line":1822},45,[50,1824,807],{"class":56},[50,1826,810],{"class":505},[50,1828,601],{"class":56},[50,1830,85],{"class":56},[50,1832,601],{"class":56},[50,1834,819],{"class":60},[50,1836,601],{"class":56},[50,1838,96],{"class":56},[50,1840,1842,1844,1846,1848],{"class":52,"line":1841},46,[50,1843,829],{"class":505},[50,1845,85],{"class":56},[50,1847,799],{"class":798},[50,1849,96],{"class":56},[50,1851,1853,1855,1857,1859,1861,1863],{"class":52,"line":1852},47,[50,1854,841],{"class":505},[50,1856,85],{"class":56},[50,1858,601],{"class":56},[50,1860,848],{"class":60},[50,1862,601],{"class":56},[50,1864,96],{"class":56},[50,1866,1868,1870],{"class":52,"line":1867},48,[50,1869,858],{"class":505},[50,1871,695],{"class":56},[50,1873,1875,1877,1879],{"class":52,"line":1874},49,[50,1876,866],{"class":505},[50,1878,85],{"class":56},[50,1880,632],{"class":56},[50,1882,1884,1886,1888,1890],{"class":52,"line":1883},50,[50,1885,876],{"class":505},[50,1887,85],{"class":56},[50,1889,881],{"class":66},[50,1891,96],{"class":56},[50,1893,1895,1897,1899,1901,1903,1905],{"class":52,"line":1894},51,[50,1896,889],{"class":505},[50,1898,85],{"class":56},[50,1900,595],{"class":56},[50,1902,896],{"class":60},[50,1904,601],{"class":56},[50,1906,96],{"class":56},[50,1908,1910,1912,1914,1916],{"class":52,"line":1909},52,[50,1911,906],{"class":505},[50,1913,85],{"class":56},[50,1915,911],{"class":798},[50,1917,96],{"class":56},[50,1919,1921,1923,1925,1927,1929,1931,1933,1935,1937,1939],{"class":52,"line":1920},53,[50,1922,919],{"class":723},[50,1924,922],{"class":56},[50,1926,925],{"class":707},[50,1928,928],{"class":56},[50,1930,931],{"class":79},[50,1932,934],{"class":56},[50,1934,937],{"class":723},[50,1936,704],{"class":505},[50,1938,925],{"class":66},[50,1940,731],{"class":505},[50,1942,1944],{"class":52,"line":1943},54,[50,1945,949],{"class":56},[50,1947,1949],{"class":52,"line":1948},55,[50,1950,955],{"class":56},[50,1952,1954,1956],{"class":52,"line":1953},56,[50,1955,961],{"class":56},[50,1957,964],{"class":66},[50,1959,1961],{"class":52,"line":1960},57,[50,1962,970],{"class":56},[50,1964,1966],{"class":52,"line":1965},58,[50,1967,737],{"class":56},[50,1969,1971],{"class":52,"line":1970},59,[50,1972,1580],{"class":1061},[50,1974,1976],{"class":52,"line":1975},60,[50,1977,686],{"class":56},[50,1979,1981],{"class":52,"line":1980},61,[50,1982,291],{"class":56},[50,1984,1986,1988,1990],{"class":52,"line":1985},62,[50,1987,568],{"class":56},[50,1989,579],{"class":505},[50,1991,509],{"class":56},[10,1993,1994,1996,1997,2000,2001,2003,2004,2006,2007,2009,2010],{},[47,1995,1803],{},"というプロパティーを追加しました。そしてfilepondの設定に",[47,1998,1999],{},"imageEditEditor","を追加して、",[47,2002,1803],{},"を参照する様にします。この",[47,2005,1999],{},"がないと編集UIが出現しません。",[47,2008,1803],{},"の雛形は",[14,2011,2014],{"href":2012,"rel":2013},"https:\u002F\u002Fpqina.nl\u002Ffilepond\u002Fdocs\u002Fapi\u002Fplugins\u002Fimage-edit#integrating-other-editors",[18],"本家ドキュメントから参照できます。",[10,2016,2017,2019],{},[47,2018,1999],{},"をしますと下図の赤矢印の様に編集ボタンが出現します。",[25,2021],{":src":2022,":width":28,":center":29},"'filepond-crop-vue\u002Feditui.png'",[10,2024,2025,2026,2028,2029,2032,2033,2036],{},"この編集ボタンをクリックした際は",[47,2027,1803],{},"の",[47,2030,2031],{},"open()=>{}","コールバックが実行されます。この際に",[47,2034,2035],{},"cropper","に画像データを渡し、起動する様にすればトリミングUIを表示できる様になります。",[322,2038,2039],{"id":2039},"cropperのレンダリング",[10,2041,2042],{},"設定の前にfilepondのコンポーネントを表示する様にします。",[40,2044,2046],{"className":494,"code":2045,"filename":490,"language":80,"meta":45,"style":45},"\u003Ctemplate>\n\u003Cdiv>\n \u003Cfile-pond v-bind=\"attrs\"\u002F>\n \u003Cvue-cropper\n ref=\"cropper\"\n :src=\"imgSrc\"\n :aspect-ratio=\"1 \u002F 1\"\n :view-mode=\"1\"\n >\n \u003C\u002Fvue-cropper>\n \u003Cbutton variant=\"primary\" @click=\"crop\">crop\u003C\u002Fbutton>\n\u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\u003Cscript>\nimport ja from 'filepond\u002Flocale\u002Fja-ja';\nimport VueCropper from 'vue-cropperjs';　 \u002F\u002F 追加\nexport default {\n name:'fileuploader',\n data(){\n return{\n files:[],\n imgSrc:'', \u002F\u002F 追加\n }\n },\n methods:{\n onError(res){\n \u002F\u002F ...\n },\n crop(){\n \u002F\u002F 追加\n \u002F\u002F とりあえずこのままにしておいてください。\n }\n },\n computed:{\n \u002F\u002F ...\n },\n components:{\n VueCropper \u002F\u002F 追加\n }\n}\n\u003C\u002Fscript>\n",[47,2047,2048,2056,2064,2082,2089,2103,2117,2131,2145,2150,2159,2201,2209,2217,2225,2241,2260,2268,2282,2288,2294,2304,2318,2322,2326,2332,2342,2347,2351,2358,2363,2368,2372,2376,2382,2386,2390,2397,2405,2410,2414],{"__ignoreMap":45},[50,2049,2050,2052,2054],{"class":52,"line":53},[50,2051,502],{"class":56},[50,2053,506],{"class":505},[50,2055,509],{"class":56},[50,2057,2058,2060,2062],{"class":52,"line":73},[50,2059,502],{"class":56},[50,2061,517],{"class":505},[50,2063,509],{"class":56},[50,2065,2066,2068,2070,2072,2074,2076,2078,2080],{"class":52,"line":99},[50,2067,514],{"class":56},[50,2069,527],{"class":505},[50,2071,542],{"class":79},[50,2073,533],{"class":56},[50,2075,57],{"class":56},[50,2077,549],{"class":60},[50,2079,57],{"class":56},[50,2081,554],{"class":56},[50,2083,2084,2086],{"class":52,"line":120},[50,2085,514],{"class":56},[50,2087,2088],{"class":505},"vue-cropper\n",[50,2090,2091,2094,2096,2098,2100],{"class":52,"line":128},[50,2092,2093],{"class":79}," ref",[50,2095,533],{"class":56},[50,2097,57],{"class":56},[50,2099,2035],{"class":60},[50,2101,2102],{"class":56},"\"\n",[50,2104,2105,2108,2110,2112,2115],{"class":52,"line":142},[50,2106,2107],{"class":79}," :src",[50,2109,533],{"class":56},[50,2111,57],{"class":56},[50,2113,2114],{"class":60},"imgSrc",[50,2116,2102],{"class":56},[50,2118,2119,2122,2124,2126,2129],{"class":52,"line":162},[50,2120,2121],{"class":79}," :aspect-ratio",[50,2123,533],{"class":56},[50,2125,57],{"class":56},[50,2127,2128],{"class":60},"1 \u002F 1",[50,2130,2102],{"class":56},[50,2132,2133,2136,2138,2140,2143],{"class":52,"line":183},[50,2134,2135],{"class":79}," :view-mode",[50,2137,533],{"class":56},[50,2139,57],{"class":56},[50,2141,2142],{"class":60},"1",[50,2144,2102],{"class":56},[50,2146,2147],{"class":52,"line":204},[50,2148,2149],{"class":56}," >\n",[50,2151,2152,2154,2157],{"class":52,"line":225},[50,2153,559],{"class":56},[50,2155,2156],{"class":505},"vue-cropper",[50,2158,509],{"class":56},[50,2160,2161,2163,2166,2169,2171,2173,2176,2178,2181,2183,2185,2188,2190,2193,2195,2197,2199],{"class":52,"line":246},[50,2162,514],{"class":56},[50,2164,2165],{"class":505},"button",[50,2167,2168],{"class":79}," variant",[50,2170,533],{"class":56},[50,2172,57],{"class":56},[50,2174,2175],{"class":60},"primary",[50,2177,57],{"class":56},[50,2179,2180],{"class":79}," @click",[50,2182,533],{"class":56},[50,2184,57],{"class":56},[50,2186,2187],{"class":60},"crop",[50,2189,57],{"class":56},[50,2191,2192],{"class":56},">",[50,2194,2187],{"class":66},[50,2196,568],{"class":56},[50,2198,2165],{"class":505},[50,2200,509],{"class":56},[50,2202,2203,2205,2207],{"class":52,"line":267},[50,2204,568],{"class":56},[50,2206,517],{"class":505},[50,2208,509],{"class":56},[50,2210,2211,2213,2215],{"class":52,"line":288},[50,2212,568],{"class":56},[50,2214,506],{"class":505},[50,2216,509],{"class":56},[50,2218,2219,2221,2223],{"class":52,"line":442},[50,2220,502],{"class":56},[50,2222,579],{"class":505},[50,2224,509],{"class":56},[50,2226,2227,2229,2231,2233,2235,2237,2239],{"class":52,"line":683},[50,2228,454],{"class":586},[50,2230,589],{"class":66},[50,2232,592],{"class":586},[50,2234,595],{"class":56},[50,2236,598],{"class":60},[50,2238,601],{"class":56},[50,2240,604],{"class":56},[50,2242,2243,2245,2247,2249,2251,2253,2255,2257],{"class":52,"line":689},[50,2244,454],{"class":586},[50,2246,611],{"class":66},[50,2248,592],{"class":586},[50,2250,595],{"class":56},[50,2252,272],{"class":60},[50,2254,601],{"class":56},[50,2256,1416],{"class":56},[50,2258,2259],{"class":1061},"　 \u002F\u002F 追加\n",[50,2261,2262,2264,2266],{"class":52,"line":698},[50,2263,626],{"class":586},[50,2265,629],{"class":586},[50,2267,632],{"class":56},[50,2269,2270,2272,2274,2276,2278,2280],{"class":52,"line":714},[50,2271,637],{"class":505},[50,2273,85],{"class":56},[50,2275,601],{"class":56},[50,2277,644],{"class":60},[50,2279,601],{"class":56},[50,2281,96],{"class":56},[50,2283,2284,2286],{"class":52,"line":734},[50,2285,653],{"class":505},[50,2287,656],{"class":56},[50,2289,2290,2292],{"class":52,"line":740},[50,2291,661],{"class":586},[50,2293,70],{"class":56},[50,2295,2296,2298,2300,2302],{"class":52,"line":745},[50,2297,668],{"class":505},[50,2299,85],{"class":56},[50,2301,673],{"class":505},[50,2303,96],{"class":56},[50,2305,2306,2309,2311,2314,2316],{"class":52,"line":753},[50,2307,2308],{"class":505}," imgSrc",[50,2310,85],{"class":56},[50,2312,2313],{"class":56},"''",[50,2315,1458],{"class":56},[50,2317,1808],{"class":1061},[50,2319,2320],{"class":52,"line":761},[50,2321,680],{"class":56},[50,2323,2324],{"class":52,"line":782},[50,2325,686],{"class":56},[50,2327,2328,2330],{"class":52,"line":790},[50,2329,692],{"class":505},[50,2331,695],{"class":56},[50,2333,2334,2336,2338,2340],{"class":52,"line":804},[50,2335,701],{"class":505},[50,2337,704],{"class":56},[50,2339,708],{"class":707},[50,2341,711],{"class":56},[50,2343,2344],{"class":52,"line":826},[50,2345,2346],{"class":1061}," \u002F\u002F ...\n",[50,2348,2349],{"class":52,"line":838},[50,2350,737],{"class":56},[50,2352,2353,2356],{"class":52,"line":855},[50,2354,2355],{"class":505}," crop",[50,2357,656],{"class":56},[50,2359,2360],{"class":52,"line":863},[50,2361,2362],{"class":1061}," \u002F\u002F 追加\n",[50,2364,2365],{"class":52,"line":873},[50,2366,2367],{"class":1061}," \u002F\u002F とりあえずこのままにしておいてください。\n",[50,2369,2370],{"class":52,"line":886},[50,2371,680],{"class":56},[50,2373,2374],{"class":52,"line":903},[50,2375,686],{"class":56},[50,2377,2378,2380],{"class":52,"line":916},[50,2379,748],{"class":505},[50,2381,695],{"class":56},[50,2383,2384],{"class":52,"line":946},[50,2385,1580],{"class":1061},[50,2387,2388],{"class":52,"line":952},[50,2389,686],{"class":56},[50,2391,2392,2395],{"class":52,"line":958},[50,2393,2394],{"class":505}," components",[50,2396,695],{"class":56},[50,2398,2399,2402],{"class":52,"line":967},[50,2400,2401],{"class":66}," VueCropper ",[50,2403,2404],{"class":1061},"\u002F\u002F 追加\n",[50,2406,2407],{"class":52,"line":973},[50,2408,2409],{"class":56}," }\n",[50,2411,2412],{"class":52,"line":978},[50,2413,291],{"class":56},[50,2415,2416,2418,2420],{"class":52,"line":983},[50,2417,568],{"class":56},[50,2419,579],{"class":505},[50,2421,509],{"class":56},[10,2423,2424,2427,2428,2430,2431,2433],{},[47,2425,2426],{},"import VueCropper from 'vue-cropperjs';","にてvue-cropperのコンポーネントを配置します。",[47,2429,2156],{},"はトリミングのUIを提供し、",[47,2432,2165],{},"はトリミングの実行を行ってfilepondにデータを渡すメソッドに連絡します。\nひとまず以下の様に表示されると思います。",[25,2435],{":src":2436,":width":28,":center":29},"'filepond-crop-vue\u002Fcropper-init.png'",[10,2438,2439],{},"なおvue-cropperのコンポーネントに設定した項目は以下の通りです。",[461,2441,2442,2448],{},[300,2443,2444,2447],{},[47,2445,2446],{},"aspect-ratio",":トリミングUIのアスペクト比です。",[300,2449,2450,2453],{},[47,2451,2452],{},"view-mode",":ビューモードと呼ばれるトリミングの選択範囲を制御できます。デフォルトは0であり制限がなく、透明の領域までトリミングできてしまします。詳しくはそれぞれ設定してみて挙動を確認してください。",[322,2455,2456],{"id":2456},"filepondからcropperへ画像を渡す",[10,2458,2459,2460,2462,2463,2466],{},"それでは編集ボタンを押したらvue-cropperへ画像を渡す様にしましょう。実際のサービスではモーダルなどを出したりした方がいいかもしれませんが、面倒なので今はそのまま表示します。",[47,2461,1803],{},"をの",[47,2464,2465],{},"open","コールバックを編集します。",[40,2468,2470],{"className":1045,"code":2469,"language":1047,"meta":45,"style":45},"editor(){\n return {\n \u002F\u002F Called by FilePond to edit the image\n \u002F\u002F - should open your image editor\n \u002F\u002F - receives file object and image edit instructions\n open: (file, instructions) => {\n \u002F\u002F open editor here\n const objectURL = URL.createObjectURL(file)\n this.imgSet =objectURL;\n this.$refs.cropper.replace(objectURL);\n },\n},\n",[47,2471,2472,2481,2488,2493,2498,2503,2524,2529,2553,2568,2592,2596],{"__ignoreMap":45},[50,2473,2474,2476,2479],{"class":52,"line":53},[50,2475,1803],{"class":723},[50,2477,2478],{"class":66},"()",[50,2480,70],{"class":56},[50,2482,2483,2486],{"class":52,"line":73},[50,2484,2485],{"class":586}," return",[50,2487,632],{"class":56},[50,2489,2490],{"class":52,"line":99},[50,2491,2492],{"class":1061}," \u002F\u002F Called by FilePond to edit the image\n",[50,2494,2495],{"class":52,"line":120},[50,2496,2497],{"class":1061}," \u002F\u002F - should open your image editor\n",[50,2499,2500],{"class":52,"line":128},[50,2501,2502],{"class":1061}," \u002F\u002F - receives file object and image edit instructions\n",[50,2504,2505,2508,2510,2512,2514,2516,2518,2520,2522],{"class":52,"line":142},[50,2506,2507],{"class":723}," open",[50,2509,85],{"class":56},[50,2511,1633],{"class":56},[50,2513,1636],{"class":707},[50,2515,1458],{"class":56},[50,2517,1641],{"class":707},[50,2519,928],{"class":56},[50,2521,931],{"class":79},[50,2523,632],{"class":56},[50,2525,2526],{"class":52,"line":162},[50,2527,2528],{"class":1061}," \u002F\u002F open editor here\n",[50,2530,2531,2534,2537,2539,2542,2544,2547,2549,2551],{"class":52,"line":183},[50,2532,2533],{"class":79}," const",[50,2535,2536],{"class":66}," objectURL",[50,2538,770],{"class":56},[50,2540,2541],{"class":66}," URL",[50,2543,720],{"class":56},[50,2545,2546],{"class":723},"createObjectURL",[50,2548,704],{"class":505},[50,2550,1636],{"class":66},[50,2552,731],{"class":505},[50,2554,2555,2558,2561,2563,2566],{"class":52,"line":204},[50,2556,2557],{"class":56}," this.",[50,2559,2560],{"class":66},"imgSet",[50,2562,770],{"class":56},[50,2564,2565],{"class":66},"objectURL",[50,2567,604],{"class":56},[50,2569,2570,2572,2575,2577,2579,2581,2584,2586,2588,2590],{"class":52,"line":225},[50,2571,2557],{"class":56},[50,2573,2574],{"class":66},"$refs",[50,2576,720],{"class":56},[50,2578,2035],{"class":66},[50,2580,720],{"class":56},[50,2582,2583],{"class":723},"replace",[50,2585,704],{"class":505},[50,2587,2565],{"class":66},[50,2589,928],{"class":505},[50,2591,604],{"class":56},[50,2593,2594],{"class":52,"line":246},[50,2595,737],{"class":56},[50,2597,2598],{"class":52,"line":267},[50,2599,2600],{"class":56},"},\n",[10,2602,2603,2605,2606,2608,2609,2612,2613,2615,2616,2619],{},[47,2604,2465],{},"コールバックは２つの引数があり、",[47,2607,1636],{},"はアップロードされたFileオブジェクトです。instructionsは編集する前のfilepondの編集情報です。fileオブジェクトから",[47,2610,2611],{},"URL.createObjectURL(file)","を使用することでブラウザアップロード（filepond）された画像をURLで参照できる様になります。そして",[47,2614,2114],{},"に代入し、そして",[47,2617,2618],{},"cropper.replace(objectURL);","を使用してトリミングの画像を差し替えます。",[10,2621,2622],{},"上記の様に編集して、編集ボタンを押すとトリミングUIが表示される様になり、任意のトリミング位置を設定できる様になります。",[25,2624],{":src":2625,":width":28,":center":29},"'filepond-crop-vue\u002Fcroppable.png'",[322,2627,2628],{"id":2628},"cropperからfilepondへ情報を渡す",[10,2630,2631],{},"トリミングUIでは任意の範囲と位置を設定できます。トリミングした画像をfilepondに適用するためには、vue-cropperで選択したトリミングの位置や範囲などのオブジェクトをfilepondに渡すことで実現できます。（cropperで画像を加工するわけではない！）",[10,2633,2634,2635,2028,2637,2640],{},"データを渡すときは",[47,2636,1803],{},[47,2638,2639],{},"onconfirm","コールバックを利用します。vue-cropperでトリミングした際にコールバックを呼び出します。",[40,2642,2644],{"className":494,"code":2643,"filename":490,"language":80,"meta":45,"style":45},"\u003Ctemplate>\n\u003Cdiv>\n \u003Cfile-pond v-bind=\"attrs\"\u002F>\n \u003Cvue-cropper\n ref=\"cropper\"\n :src=\"imgSrc\"\n :aspect-ratio=\"1 \u002F 1\"\n :view-mode=\"1\"\n >\n \u003C\u002Fvue-cropper>\n \u003Cbutton variant=\"primary\" @click=\"crop\">crop\u003C\u002Fbutton>\n\u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\u003Cscript>\nimport ja from 'filepond\u002Flocale\u002Fja-ja';\nimport VueCropper from 'vue-cropperjs';　 \u002F\u002F 追加\nexport default {\n name:'fileuploader',\n data(){\n return{\n files:[],\n imgSrc:'', \u002F\u002F 追加\n }\n },\n methods:{\n onError(res){\n \u002F\u002F ...\n },\n crop(){\n \u002F\u002F 追加\n this.editor.onconfirm()\n }\n },\n computed:{\n editor(){\n return{\n \u002F\u002F ...\n onconfirm: (data) => {},\n \u002F\u002F ...\n }\n }\n },\n components:{\n VueCropper \u002F\u002F 追加\n }\n}\n\u003C\u002Fscript>\n",[47,2645,2646,2654,2662,2680,2686,2698,2710,2722,2734,2738,2746,2782,2790,2798,2806,2822,2840,2848,2862,2868,2874,2884,2896,2900,2904,2910,2920,2924,2928,2934,2938,2951,2955,2959,2965,2971,2977,2982,2998,3002,3006,3010,3014,3020,3026,3030,3034],{"__ignoreMap":45},[50,2647,2648,2650,2652],{"class":52,"line":53},[50,2649,502],{"class":56},[50,2651,506],{"class":505},[50,2653,509],{"class":56},[50,2655,2656,2658,2660],{"class":52,"line":73},[50,2657,502],{"class":56},[50,2659,517],{"class":505},[50,2661,509],{"class":56},[50,2663,2664,2666,2668,2670,2672,2674,2676,2678],{"class":52,"line":99},[50,2665,514],{"class":56},[50,2667,527],{"class":505},[50,2669,542],{"class":79},[50,2671,533],{"class":56},[50,2673,57],{"class":56},[50,2675,549],{"class":60},[50,2677,57],{"class":56},[50,2679,554],{"class":56},[50,2681,2682,2684],{"class":52,"line":120},[50,2683,514],{"class":56},[50,2685,2088],{"class":505},[50,2687,2688,2690,2692,2694,2696],{"class":52,"line":128},[50,2689,2093],{"class":79},[50,2691,533],{"class":56},[50,2693,57],{"class":56},[50,2695,2035],{"class":60},[50,2697,2102],{"class":56},[50,2699,2700,2702,2704,2706,2708],{"class":52,"line":142},[50,2701,2107],{"class":79},[50,2703,533],{"class":56},[50,2705,57],{"class":56},[50,2707,2114],{"class":60},[50,2709,2102],{"class":56},[50,2711,2712,2714,2716,2718,2720],{"class":52,"line":162},[50,2713,2121],{"class":79},[50,2715,533],{"class":56},[50,2717,57],{"class":56},[50,2719,2128],{"class":60},[50,2721,2102],{"class":56},[50,2723,2724,2726,2728,2730,2732],{"class":52,"line":183},[50,2725,2135],{"class":79},[50,2727,533],{"class":56},[50,2729,57],{"class":56},[50,2731,2142],{"class":60},[50,2733,2102],{"class":56},[50,2735,2736],{"class":52,"line":204},[50,2737,2149],{"class":56},[50,2739,2740,2742,2744],{"class":52,"line":225},[50,2741,559],{"class":56},[50,2743,2156],{"class":505},[50,2745,509],{"class":56},[50,2747,2748,2750,2752,2754,2756,2758,2760,2762,2764,2766,2768,2770,2772,2774,2776,2778,2780],{"class":52,"line":246},[50,2749,514],{"class":56},[50,2751,2165],{"class":505},[50,2753,2168],{"class":79},[50,2755,533],{"class":56},[50,2757,57],{"class":56},[50,2759,2175],{"class":60},[50,2761,57],{"class":56},[50,2763,2180],{"class":79},[50,2765,533],{"class":56},[50,2767,57],{"class":56},[50,2769,2187],{"class":60},[50,2771,57],{"class":56},[50,2773,2192],{"class":56},[50,2775,2187],{"class":66},[50,2777,568],{"class":56},[50,2779,2165],{"class":505},[50,2781,509],{"class":56},[50,2783,2784,2786,2788],{"class":52,"line":267},[50,2785,568],{"class":56},[50,2787,517],{"class":505},[50,2789,509],{"class":56},[50,2791,2792,2794,2796],{"class":52,"line":288},[50,2793,568],{"class":56},[50,2795,506],{"class":505},[50,2797,509],{"class":56},[50,2799,2800,2802,2804],{"class":52,"line":442},[50,2801,502],{"class":56},[50,2803,579],{"class":505},[50,2805,509],{"class":56},[50,2807,2808,2810,2812,2814,2816,2818,2820],{"class":52,"line":683},[50,2809,454],{"class":586},[50,2811,589],{"class":66},[50,2813,592],{"class":586},[50,2815,595],{"class":56},[50,2817,598],{"class":60},[50,2819,601],{"class":56},[50,2821,604],{"class":56},[50,2823,2824,2826,2828,2830,2832,2834,2836,2838],{"class":52,"line":689},[50,2825,454],{"class":586},[50,2827,611],{"class":66},[50,2829,592],{"class":586},[50,2831,595],{"class":56},[50,2833,272],{"class":60},[50,2835,601],{"class":56},[50,2837,1416],{"class":56},[50,2839,2259],{"class":1061},[50,2841,2842,2844,2846],{"class":52,"line":698},[50,2843,626],{"class":586},[50,2845,629],{"class":586},[50,2847,632],{"class":56},[50,2849,2850,2852,2854,2856,2858,2860],{"class":52,"line":714},[50,2851,637],{"class":505},[50,2853,85],{"class":56},[50,2855,601],{"class":56},[50,2857,644],{"class":60},[50,2859,601],{"class":56},[50,2861,96],{"class":56},[50,2863,2864,2866],{"class":52,"line":734},[50,2865,653],{"class":505},[50,2867,656],{"class":56},[50,2869,2870,2872],{"class":52,"line":740},[50,2871,661],{"class":586},[50,2873,70],{"class":56},[50,2875,2876,2878,2880,2882],{"class":52,"line":745},[50,2877,668],{"class":505},[50,2879,85],{"class":56},[50,2881,673],{"class":505},[50,2883,96],{"class":56},[50,2885,2886,2888,2890,2892,2894],{"class":52,"line":753},[50,2887,2308],{"class":505},[50,2889,85],{"class":56},[50,2891,2313],{"class":56},[50,2893,1458],{"class":56},[50,2895,1808],{"class":1061},[50,2897,2898],{"class":52,"line":761},[50,2899,680],{"class":56},[50,2901,2902],{"class":52,"line":782},[50,2903,686],{"class":56},[50,2905,2906,2908],{"class":52,"line":790},[50,2907,692],{"class":505},[50,2909,695],{"class":56},[50,2911,2912,2914,2916,2918],{"class":52,"line":804},[50,2913,701],{"class":505},[50,2915,704],{"class":56},[50,2917,708],{"class":707},[50,2919,711],{"class":56},[50,2921,2922],{"class":52,"line":826},[50,2923,2346],{"class":1061},[50,2925,2926],{"class":52,"line":838},[50,2927,737],{"class":56},[50,2929,2930,2932],{"class":52,"line":855},[50,2931,2355],{"class":505},[50,2933,656],{"class":56},[50,2935,2936],{"class":52,"line":863},[50,2937,2362],{"class":1061},[50,2939,2940,2942,2944,2946,2948],{"class":52,"line":873},[50,2941,2557],{"class":56},[50,2943,1803],{"class":66},[50,2945,720],{"class":56},[50,2947,2639],{"class":723},[50,2949,2950],{"class":505},"()\n",[50,2952,2953],{"class":52,"line":886},[50,2954,680],{"class":56},[50,2956,2957],{"class":52,"line":903},[50,2958,686],{"class":56},[50,2960,2961,2963],{"class":52,"line":916},[50,2962,748],{"class":505},[50,2964,695],{"class":56},[50,2966,2967,2969],{"class":52,"line":946},[50,2968,1600],{"class":505},[50,2970,656],{"class":56},[50,2972,2973,2975],{"class":52,"line":952},[50,2974,785],{"class":586},[50,2976,70],{"class":56},[50,2978,2979],{"class":52,"line":958},[50,2980,2981],{"class":1061}," \u002F\u002F ...\n",[50,2983,2984,2986,2988,2990,2992,2994,2996],{"class":52,"line":967},[50,2985,1684],{"class":723},[50,2987,85],{"class":56},[50,2989,1633],{"class":56},[50,2991,1691],{"class":707},[50,2993,928],{"class":56},[50,2995,931],{"class":79},[50,2997,1698],{"class":56},[50,2999,3000],{"class":52,"line":973},[50,3001,2981],{"class":1061},[50,3003,3004],{"class":52,"line":978},[50,3005,970],{"class":56},[50,3007,3008],{"class":52,"line":983},[50,3009,680],{"class":56},[50,3011,3012],{"class":52,"line":988},[50,3013,686],{"class":56},[50,3015,3016,3018],{"class":52,"line":1794},[50,3017,2394],{"class":505},[50,3019,695],{"class":56},[50,3021,3022,3024],{"class":52,"line":1811},[50,3023,2401],{"class":66},[50,3025,2404],{"class":1061},[50,3027,3028],{"class":52,"line":1822},[50,3029,2409],{"class":56},[50,3031,3032],{"class":52,"line":1841},[50,3033,291],{"class":56},[50,3035,3036,3038,3040],{"class":52,"line":1852},[50,3037,568],{"class":56},[50,3039,579],{"class":505},[50,3041,509],{"class":56},[10,3043,3044,3045,3047],{},"この時",[47,3046,2639],{},"に渡すデータは以下の様に定義する必要があります。",[40,3049,3052],{"className":3050,"code":3051,"language":330},[328],"{\n data: {\n \u002F\u002F This is the same as the instructions object\n crop: {\n center: {\n x: .5,\n y: .5\n },\n flip: {\n horizontal: false,\n vertical: false\n },\n zoom: 1,\n rotation: 0,\n aspectRatio: null\n }\n }\n}\n",[47,3053,3051],{"__ignoreMap":45},[10,3055,3056,3057,2028,3059,3062,3063,3066,3067,3069],{},"このデータは",[47,3058,1803],{},[47,3060,3061],{},"open(file, instructions)","コールバックの",[47,3064,3065],{},"instructions","と同じ構造です。filepondはこの",[47,3068,3065],{},"の値を変更することで、プレビューの画像表示や実際にアップロードする画像のトリミングなどが実行されます。",[10,3071,3072,3073,3076,3077,3080],{},"そのためvue-cropperのトリミングによる座標位置や、トリミング範囲上記のデータに合わせて設定する必要があります。vue-cropperには",[47,3074,3075],{},"getCanvasData()","や",[47,3078,3079],{},"getData()","などのメソッドがあるため、それらを用いてvue-cropperのデータをコールバックを通してfilepondへ渡します。",[3082,3083,3084],"h4",{"id":3084},"計算を行う",[10,3086,3087,3088,3093,3094,3097],{},"しかしfilepondに渡すデータは結構クセがあり、cropperから取得できる情報の何をどこに当てはめればいいのかわかりません。",[14,3089,3092],{"href":3090,"rel":3091},"https:\u002F\u002Fgithub.com\u002Fpqina\u002Ffilepond-plugin-image-edit\u002Fissues\u002F1",[18],"github issueにてcropper.jsとの連携に関するissue","を発見し、今回はその値を用いることにします。",[47,3095,3096],{},"crop()","を以下の様に変更します。",[40,3099,3101],{"className":1045,"code":3100,"language":1047,"meta":45,"style":45},"crop(){\n \u002F\u002F https:\u002F\u002Fgithub.com\u002Fpqina\u002Ffilepond-plugin-image-edit\u002Fissues\u002F1\n \u002F* Constants. *\u002F\n const canvasData = this.$refs.cropper.getCanvasData() \u002F\u002F Cropperjs method getCanvasData()\n const cropData = this.$refs.cropper.getData() \u002F\u002F Cropperjs method getData()\n\n \u002F* Ratio of selected crop area. *\u002F\n const cropAreaRatio = cropData.height \u002F cropData.width\n\n \u002F* Center point of crop area in percent. *\u002F\n const percentX = (cropData.x + cropData.width \u002F 2) \u002F canvasData.naturalWidth\n const percentY = (cropData.y + cropData.height \u002F 2) \u002F canvasData.naturalHeight\n\n \u002F* Calculate available space round image center position. *\u002F\n const cx = percentX > 0.5 ? 1 - percentX : percentX\n const cy = percentY > 0.5 ? 1 - percentY : percentY\n\n \u002F* Calculate image rectangle respecting space round image from crop area. *\u002F\n let width = canvasData.naturalWidth\n let height = width * cropAreaRatio\n if (height > canvasData.naturalHeight) {\n height = canvasData.naturalHeight\n width = height \u002F cropAreaRatio\n }\n const rectWidth = cx * 2 * width\n const rectHeight = cy * 2 * height\n\n \u002F* Calculate zoom. *\u002F\n const zoom = Math.max(rectWidth \u002F cropData.width, rectHeight \u002F cropData.height)\n this.editor.onconfirm({\n data: {\n crop: {\n center: {\n x: percentX,\n y: percentY\n },\n flip: {\n horizontal: cropData.scaleX \u003C 0,\n vertical: cropData.scaleY \u003C 0\n },\n zoom: zoom,\n rotation: (Math.PI \u002F 180) * cropData.rotate,\n aspectRatio: cropAreaRatio\n }\n }\n })\n}\n",[47,3102,3103,3111,3116,3121,3150,3177,3181,3186,3212,3216,3221,3269,3310,3314,3319,3353,3381,3385,3390,3406,3423,3445,3458,3471,3475,3495,3515,3519,3524,3568,3583,3591,3599,3608,3619,3628,3633,3642,3664,3683,3687,3698,3734,3743,3747,3751,3758],{"__ignoreMap":45},[50,3104,3105,3107,3109],{"class":52,"line":53},[50,3106,2187],{"class":723},[50,3108,2478],{"class":66},[50,3110,70],{"class":56},[50,3112,3113],{"class":52,"line":73},[50,3114,3115],{"class":1061}," \u002F\u002F https:\u002F\u002Fgithub.com\u002Fpqina\u002Ffilepond-plugin-image-edit\u002Fissues\u002F1\n",[50,3117,3118],{"class":52,"line":99},[50,3119,3120],{"class":1061}," \u002F* Constants. *\u002F\n",[50,3122,3123,3126,3129,3131,3133,3135,3137,3139,3141,3144,3147],{"class":52,"line":120},[50,3124,3125],{"class":79}," const",[50,3127,3128],{"class":66}," canvasData",[50,3130,770],{"class":56},[50,3132,934],{"class":56},[50,3134,2574],{"class":66},[50,3136,720],{"class":56},[50,3138,2035],{"class":66},[50,3140,720],{"class":56},[50,3142,3143],{"class":723},"getCanvasData",[50,3145,3146],{"class":505},"() ",[50,3148,3149],{"class":1061},"\u002F\u002F Cropperjs method getCanvasData()\n",[50,3151,3152,3154,3157,3159,3161,3163,3165,3167,3169,3172,3174],{"class":52,"line":128},[50,3153,3125],{"class":79},[50,3155,3156],{"class":66}," cropData",[50,3158,770],{"class":56},[50,3160,934],{"class":56},[50,3162,2574],{"class":66},[50,3164,720],{"class":56},[50,3166,2035],{"class":66},[50,3168,720],{"class":56},[50,3170,3171],{"class":723},"getData",[50,3173,3146],{"class":505},[50,3175,3176],{"class":1061},"\u002F\u002F Cropperjs method getData()\n",[50,3178,3179],{"class":52,"line":142},[50,3180,386],{"emptyLinePlaceholder":385},[50,3182,3183],{"class":52,"line":162},[50,3184,3185],{"class":1061}," \u002F* Ratio of selected crop area. *\u002F\n",[50,3187,3188,3190,3193,3195,3197,3199,3202,3205,3207,3209],{"class":52,"line":183},[50,3189,3125],{"class":79},[50,3191,3192],{"class":66}," cropAreaRatio",[50,3194,770],{"class":56},[50,3196,3156],{"class":66},[50,3198,720],{"class":56},[50,3200,3201],{"class":66},"height",[50,3203,3204],{"class":56}," \u002F",[50,3206,3156],{"class":66},[50,3208,720],{"class":56},[50,3210,3211],{"class":66},"width\n",[50,3213,3214],{"class":52,"line":204},[50,3215,386],{"emptyLinePlaceholder":385},[50,3217,3218],{"class":52,"line":225},[50,3219,3220],{"class":1061}," \u002F* Center point of crop area in percent. *\u002F\n",[50,3222,3223,3225,3228,3230,3232,3235,3237,3240,3243,3245,3247,3250,3252,3256,3259,3262,3264,3266],{"class":52,"line":246},[50,3224,3125],{"class":79},[50,3226,3227],{"class":66}," percentX",[50,3229,770],{"class":56},[50,3231,1633],{"class":505},[50,3233,3234],{"class":66},"cropData",[50,3236,720],{"class":56},[50,3238,3239],{"class":66},"x",[50,3241,3242],{"class":56}," +",[50,3244,3156],{"class":66},[50,3246,720],{"class":56},[50,3248,3249],{"class":66},"width",[50,3251,3204],{"class":56},[50,3253,3255],{"class":3254},"sx098"," 2",[50,3257,3258],{"class":505},") ",[50,3260,3261],{"class":56},"\u002F",[50,3263,3128],{"class":66},[50,3265,720],{"class":56},[50,3267,3268],{"class":66},"naturalWidth\n",[50,3270,3271,3273,3276,3278,3280,3282,3284,3287,3289,3291,3293,3295,3297,3299,3301,3303,3305,3307],{"class":52,"line":267},[50,3272,3125],{"class":79},[50,3274,3275],{"class":66}," percentY",[50,3277,770],{"class":56},[50,3279,1633],{"class":505},[50,3281,3234],{"class":66},[50,3283,720],{"class":56},[50,3285,3286],{"class":66},"y",[50,3288,3242],{"class":56},[50,3290,3156],{"class":66},[50,3292,720],{"class":56},[50,3294,3201],{"class":66},[50,3296,3204],{"class":56},[50,3298,3255],{"class":3254},[50,3300,3258],{"class":505},[50,3302,3261],{"class":56},[50,3304,3128],{"class":66},[50,3306,720],{"class":56},[50,3308,3309],{"class":66},"naturalHeight\n",[50,3311,3312],{"class":52,"line":288},[50,3313,386],{"emptyLinePlaceholder":385},[50,3315,3316],{"class":52,"line":442},[50,3317,3318],{"class":1061}," \u002F* Calculate available space round image center position. *\u002F\n",[50,3320,3321,3323,3326,3328,3330,3333,3336,3339,3342,3345,3347,3350],{"class":52,"line":683},[50,3322,3125],{"class":79},[50,3324,3325],{"class":66}," cx",[50,3327,770],{"class":56},[50,3329,3227],{"class":66},[50,3331,3332],{"class":56}," >",[50,3334,3335],{"class":3254}," 0.5",[50,3337,3338],{"class":56}," ?",[50,3340,3341],{"class":3254}," 1",[50,3343,3344],{"class":56}," -",[50,3346,3227],{"class":66},[50,3348,3349],{"class":56}," :",[50,3351,3352],{"class":66}," percentX\n",[50,3354,3355,3357,3360,3362,3364,3366,3368,3370,3372,3374,3376,3378],{"class":52,"line":689},[50,3356,3125],{"class":79},[50,3358,3359],{"class":66}," cy",[50,3361,770],{"class":56},[50,3363,3275],{"class":66},[50,3365,3332],{"class":56},[50,3367,3335],{"class":3254},[50,3369,3338],{"class":56},[50,3371,3341],{"class":3254},[50,3373,3344],{"class":56},[50,3375,3275],{"class":66},[50,3377,3349],{"class":56},[50,3379,3380],{"class":66}," percentY\n",[50,3382,3383],{"class":52,"line":698},[50,3384,386],{"emptyLinePlaceholder":385},[50,3386,3387],{"class":52,"line":714},[50,3388,3389],{"class":1061}," \u002F* Calculate image rectangle respecting space round image from crop area. *\u002F\n",[50,3391,3392,3395,3398,3400,3402,3404],{"class":52,"line":734},[50,3393,3394],{"class":79}," let",[50,3396,3397],{"class":66}," width",[50,3399,770],{"class":56},[50,3401,3128],{"class":66},[50,3403,720],{"class":56},[50,3405,3268],{"class":66},[50,3407,3408,3410,3413,3415,3417,3420],{"class":52,"line":740},[50,3409,3394],{"class":79},[50,3411,3412],{"class":66}," height",[50,3414,770],{"class":56},[50,3416,3397],{"class":66},[50,3418,3419],{"class":56}," *",[50,3421,3422],{"class":66}," cropAreaRatio\n",[50,3424,3425,3428,3430,3432,3434,3436,3438,3441,3443],{"class":52,"line":745},[50,3426,3427],{"class":586}," if",[50,3429,1633],{"class":505},[50,3431,3201],{"class":66},[50,3433,3332],{"class":56},[50,3435,3128],{"class":66},[50,3437,720],{"class":56},[50,3439,3440],{"class":66},"naturalHeight",[50,3442,3258],{"class":505},[50,3444,70],{"class":56},[50,3446,3447,3450,3452,3454,3456],{"class":52,"line":753},[50,3448,3449],{"class":66}," height",[50,3451,770],{"class":56},[50,3453,3128],{"class":66},[50,3455,720],{"class":56},[50,3457,3309],{"class":66},[50,3459,3460,3463,3465,3467,3469],{"class":52,"line":761},[50,3461,3462],{"class":66}," width",[50,3464,770],{"class":56},[50,3466,3412],{"class":66},[50,3468,3204],{"class":56},[50,3470,3422],{"class":66},[50,3472,3473],{"class":52,"line":782},[50,3474,2409],{"class":56},[50,3476,3477,3479,3482,3484,3486,3488,3490,3492],{"class":52,"line":790},[50,3478,3125],{"class":79},[50,3480,3481],{"class":66}," rectWidth",[50,3483,770],{"class":56},[50,3485,3325],{"class":66},[50,3487,3419],{"class":56},[50,3489,3255],{"class":3254},[50,3491,3419],{"class":56},[50,3493,3494],{"class":66}," width\n",[50,3496,3497,3499,3502,3504,3506,3508,3510,3512],{"class":52,"line":804},[50,3498,3125],{"class":79},[50,3500,3501],{"class":66}," rectHeight",[50,3503,770],{"class":56},[50,3505,3359],{"class":66},[50,3507,3419],{"class":56},[50,3509,3255],{"class":3254},[50,3511,3419],{"class":56},[50,3513,3514],{"class":66}," height\n",[50,3516,3517],{"class":52,"line":826},[50,3518,386],{"emptyLinePlaceholder":385},[50,3520,3521],{"class":52,"line":838},[50,3522,3523],{"class":1061}," \u002F* Calculate zoom. *\u002F\n",[50,3525,3526,3528,3531,3533,3536,3538,3541,3543,3546,3548,3550,3552,3554,3556,3558,3560,3562,3564,3566],{"class":52,"line":855},[50,3527,3125],{"class":79},[50,3529,3530],{"class":66}," zoom",[50,3532,770],{"class":56},[50,3534,3535],{"class":66}," Math",[50,3537,720],{"class":56},[50,3539,3540],{"class":723},"max",[50,3542,704],{"class":505},[50,3544,3545],{"class":66},"rectWidth",[50,3547,3204],{"class":56},[50,3549,3156],{"class":66},[50,3551,720],{"class":56},[50,3553,3249],{"class":66},[50,3555,1458],{"class":56},[50,3557,3501],{"class":66},[50,3559,3204],{"class":56},[50,3561,3156],{"class":66},[50,3563,720],{"class":56},[50,3565,3201],{"class":66},[50,3567,731],{"class":505},[50,3569,3570,3573,3575,3577,3579,3581],{"class":52,"line":863},[50,3571,3572],{"class":56}," this.",[50,3574,1803],{"class":66},[50,3576,720],{"class":56},[50,3578,2639],{"class":723},[50,3580,704],{"class":505},[50,3582,70],{"class":56},[50,3584,3585,3587,3589],{"class":52,"line":873},[50,3586,653],{"class":505},[50,3588,85],{"class":56},[50,3590,632],{"class":56},[50,3592,3593,3595,3597],{"class":52,"line":886},[50,3594,2355],{"class":505},[50,3596,85],{"class":56},[50,3598,632],{"class":56},[50,3600,3601,3604,3606],{"class":52,"line":903},[50,3602,3603],{"class":505}," center",[50,3605,85],{"class":56},[50,3607,632],{"class":56},[50,3609,3610,3613,3615,3617],{"class":52,"line":916},[50,3611,3612],{"class":505}," x",[50,3614,85],{"class":56},[50,3616,3227],{"class":66},[50,3618,96],{"class":56},[50,3620,3621,3624,3626],{"class":52,"line":946},[50,3622,3623],{"class":505}," y",[50,3625,85],{"class":56},[50,3627,3380],{"class":66},[50,3629,3630],{"class":52,"line":952},[50,3631,3632],{"class":56}," },\n",[50,3634,3635,3638,3640],{"class":52,"line":958},[50,3636,3637],{"class":505}," flip",[50,3639,85],{"class":56},[50,3641,632],{"class":56},[50,3643,3644,3647,3649,3651,3653,3656,3659,3662],{"class":52,"line":967},[50,3645,3646],{"class":505}," horizontal",[50,3648,85],{"class":56},[50,3650,3156],{"class":66},[50,3652,720],{"class":56},[50,3654,3655],{"class":66},"scaleX",[50,3657,3658],{"class":56}," \u003C",[50,3660,3661],{"class":3254}," 0",[50,3663,96],{"class":56},[50,3665,3666,3669,3671,3673,3675,3678,3680],{"class":52,"line":973},[50,3667,3668],{"class":505}," vertical",[50,3670,85],{"class":56},[50,3672,3156],{"class":66},[50,3674,720],{"class":56},[50,3676,3677],{"class":66},"scaleY",[50,3679,3658],{"class":56},[50,3681,3682],{"class":3254}," 0\n",[50,3684,3685],{"class":52,"line":978},[50,3686,3632],{"class":56},[50,3688,3689,3692,3694,3696],{"class":52,"line":983},[50,3690,3691],{"class":505}," zoom",[50,3693,85],{"class":56},[50,3695,3530],{"class":66},[50,3697,96],{"class":56},[50,3699,3700,3703,3705,3707,3710,3712,3715,3717,3720,3722,3725,3727,3729,3732],{"class":52,"line":988},[50,3701,3702],{"class":505}," rotation",[50,3704,85],{"class":56},[50,3706,1633],{"class":505},[50,3708,3709],{"class":66},"Math",[50,3711,720],{"class":56},[50,3713,3714],{"class":66},"PI",[50,3716,3204],{"class":56},[50,3718,3719],{"class":3254}," 180",[50,3721,3258],{"class":505},[50,3723,3724],{"class":56},"*",[50,3726,3156],{"class":66},[50,3728,720],{"class":56},[50,3730,3731],{"class":66},"rotate",[50,3733,96],{"class":56},[50,3735,3736,3739,3741],{"class":52,"line":1794},[50,3737,3738],{"class":505}," aspectRatio",[50,3740,85],{"class":56},[50,3742,3422],{"class":66},[50,3744,3745],{"class":52,"line":1811},[50,3746,680],{"class":56},[50,3748,3749],{"class":52,"line":1822},[50,3750,2409],{"class":56},[50,3752,3753,3756],{"class":52,"line":1841},[50,3754,3755],{"class":56}," }",[50,3757,731],{"class":505},[50,3759,3760],{"class":52,"line":1852},[50,3761,291],{"class":56},[293,3763,3764],{"id":3764},"アップロードを行う",[10,3766,3767],{},"これでvue-cropperのトリミング情報をfilepondに渡すことができる様になりました。実際にトリミング範囲を指定してcropボタンをクリックしますと、その位置と範囲にしたがってトリミングされた範囲がプレビューされます。",[25,3769],{":src":3770,":width":28,":center":29},"'filepond-crop-vue\u002Fcropped.png'",[10,3772,3773,3774,3777],{},"そして最後にアップロードボタンをクリックすると渡されたデータを元に、filepondが元画像のトリミングを行いアップロードします。トリミングしてもらうためには",[47,3775,3776],{},"FilePondPluginImageTransform","がインストールされ、有効になっている必要があります。サーバー側では１：１にトリミングされた画像を確認することができます。",[293,3779,3780],{"id":3780},"まとめ",[10,3782,3783,3784,3789],{},"filepondは主にブラウザアップロードと実際のトリミング処理を行います。そしてトリミング箇所の指定は別のライブラリを用いて実装する必要があります。filepondは",[14,3785,3788],{"href":3786,"rel":3787},"https:\u002F\u002Fpqina.nl\u002Fpintura\u002F",[18],"Doka Image Editor","という有償ライブラリとの互換性を第一にしているそうで、cropper.jsとの連携と特に計算が方法がわかりませんでした。ひとまず上記の方法でトリミングとアップロード機能が実装できました。後はUIを整えてあげれば完成です。",[3791,3792,3793],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html pre.shiki code .s0W1g, html code.shiki .s0W1g{--shiki-default:#BABED8}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}html pre.shiki code .s6cf3, html code.shiki .s6cf3{--shiki-default:#89DDFF;--shiki-default-font-style:italic}html pre.shiki code .s7ZW3, html code.shiki .s7ZW3{--shiki-default:#BABED8;--shiki-default-font-style:italic}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html pre.shiki code .sbqyR, html code.shiki .sbqyR{--shiki-default:#FF9CAC}html pre.shiki code .sC9rS, html code.shiki .sC9rS{--shiki-default:#464B5D;--shiki-default-font-style:italic}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}",{"title":45,"searchDepth":99,"depth":99,"links":3795},[3796,3797,3801,3804,3812,3813],{"id":295,"depth":73,"text":295},{"id":317,"depth":73,"text":317,"children":3798},[3799,3800],{"id":324,"depth":99,"text":324},{"id":359,"depth":99,"text":360},{"id":483,"depth":73,"text":484,"children":3802},[3803],{"id":1003,"depth":99,"text":1003},{"id":1305,"depth":73,"text":1306,"children":3805},[3806,3807,3808,3809],{"id":1495,"depth":99,"text":1496},{"id":2039,"depth":99,"text":2039},{"id":2456,"depth":99,"text":2456},{"id":2628,"depth":99,"text":2628,"children":3810},[3811],{"id":3084,"depth":120,"text":3084},{"id":3764,"depth":73,"text":3764},{"id":3780,"depth":73,"text":3780},[3815],"devstack","2025-12-09","Vueでブラウザでのトリミング機能とファイルアップロードを実装する","md",null,{},"\u002Farticles\u002Ffilepond-crop-vue",{"title":5,"description":3817},"articles\u002Ffilepond-crop-vue",[1047,80],"filepond-crop-vue\u002Fthumbnail.png","an_V9C83Uuzs33hco6VOdrE9TtIqJVF5teLfyG0kaaE",1780987140612]