フロントエンドが自動的に画像を生成してダウンロードします.60行未満のコードです.

いくつかの簡単な写真を合わせて処理する必要がありますが、適切なバカソフトを見つけられませんでした.需要を解決することができます.また、頭が痛いのはnodejsの中の画像処理ライブラリです.基本的にはあまりいいものがなく、インストールに苦労しました.追求のある先端として、他のものに頼らず、直接先端ページでそれを実現してもいいですか?そしてこの小さな試みがあります.実はとても簡単です.この文だけを記録してください.後で忘れないようにしてください.
前奏の1.canvasの安全制限のため、私達は資源とホームページが同一のドメイン名の下で行うことを保証しなければならなくて、さもなくば絵が入るのは問題がないので、しかし導き出すと“画布が汚染されます”の誤りを報告します.ですから、私たちは全部でいくつかの解決方法があります.
img.set Attribute(『cross Origin』『anonymous』)URL.revokeObject URL以上は私が個人的に探求している5つの解決方法で、それぞれ異なるシーンでの需要に適しています.
前の二つの例は展示に不便です.直接に下の3つの方法の対応コード例です.
let can=document.getElemenntById(‘canvas’);let ctx=can.get Conttext(‘2 d’);fetch(‘https://img.alicdn.com/bao/uploaded/i1/446338500/O1CN01npzdZ52Cf3A4cx8JG_!!0-itemuuup.jpgg.jpg.).then(res=>res.blob().then(res=>{let fr=new Fileader();fr.onload=function(e){consosone.lose.lolose(e)sosone.loe.loe.sone.lose.lone.lone.lone.lone.lone.lone.lone.lone.lone.lone.loe.lone.loe.lone.lone.lone.lone.lone.lone.lone.lone.lone.lone.lone.lone.lone.lone.loe.loe.lone.loe.loe;//img.src=//‘https://img.alicdn.com/bao/uploaded/i1/446338500/O1CN01npzdZ52Cf3A4cx8JG_!0-itemtup.jpgu 240 x 2400.jpg'//第二の方法/img.src=e.target.relt;//base 64/第三の方法/img.src=URL.creatObject URLに変換します.

    img.onload = function () {
      ctx.drawImage(img, 0, 0)
      console.log(can.toDataURL())//   dataurl
      // canvas.toBlob(function (blob) {//   blob  
      //   var url = URL.createObjectURL(blob);
      //   console.log(url)
      // });
    }
  }
  fr.onerror = function () {
    console.log('    ！')
  }
  fr.readAsDataURL(res)
})

完全なエクスポートは、前奏のプロセスがあります.これからダウンロードを開始します.aタグのdownloadを利用すればいいです.aタグのdownload属性はクロスドメインをサポートしていません.でも、私たちの中ではクロスドメインには関係しません.
どのように大量にエクスポートしますか?
ここで注意したいのですが、私たちはAync awaitを使って順番に実行します.このようにすると、順番に実行します.また、ブラウザは自動でダウンロードできるようにしてください.
例:
(async()=>{let reult=[]let arr=[]for(let i=0;i{set Timeout((==>{rererererelogs(),10)))))try｛aaawaitcritartttttttttcacacacacacacacacacacacatttttttttttttttcacacacacacacacacacacacacacacacacacacacattttttttttttttttttttttttttttttttttttttt写真')}catch(e){result.push(arr[i])consolie.log(arr[i],‘プログラム処理時に画像を処理できない’,‘原因:’,e’｝

document.body.innerText = result.join("")

)()
function createImg{return new Promise=>{let temp=new Image()temp.src=''http://XXXXXX/getpic?type=touming&article=’＋article;temp.onerror=function(){rej}temp.onload=function(){ctx.drawImage(temp,940,90,650,650);var bloball=canvas.toData URL(‘image/jpeg’);var ancher=document.creatElement(‘a’)、ancher.href=bloburl;anchor.download=article;ancher.click(0,0,2000,800)、ctx.fillStyle=“rgb(236,237,239)”fill.fill.
ここで注意したいのですが、Imageの対象となるオンerrorイベントを定義しました.async awaitが待っているPromiseはサーバエラーをキャプチャしたことを知らないからです.ですから、私たちはonerrorの中に導入して、そしてrejectを落として、promiseは間違った情報を得ることができます.その後、catchを使えばいいです.また、複雑なエラーが発生するのを防ぐために、try catchを入れてエラーを確保してもらえます.
フロントエンド学習グループを追加できます.1017810018みんなで勉強します.