web-dev-qa-db-ja.com

JavaScriptを使用してURLをdataurlにImg

JavaScriptを使用して、次のようなimgタグを変換したいと思います。

<img width="11" height="14" src="http://mysite/file.gif" alt="File Icon">

このようなdataurlを持つものに：

<img width="11" height="14" src="data:image/gif;base64,R0lGODlhCwAOAMQfAP////7+/vj4+Hh4eHd3d/v7+/Dw8HV1dfLy8ubm5vX19e3t7fr6+nl5edra2nZ2dnx8fMHBwYODg/b29np6eujo6JGRkeHh4eTk5LCwsN3d3dfX13Jycp2dnevr6////yH5BAEAAB8ALAAAAAALAA4AAAVq4NFw1DNAX/o9imAsBtKpxKRd1+YEWUoIiUoiEWEAApIDMLGoRCyWiKThenkwDgeGMiggDLEXQkDoThCKNLpQDgjeAsY7MHgECgx8YR8oHwNHfwADBACGh4EDA4iGAYAEBAcQIg0Dk gcEIQA7" alt="File Icon">

これは可能ですか？

javascripthtmlimagedata-uri
7
adam0101

まず、画像をキャンバスにロードします

_var canvas = document.createElement("canvas");
context = canvas.getContext('2d');

make_base();

function make_base()
{
  base_image = new Image();
  base_image.src = 'img/base.png';
  base_image.onload = function(){
    context.drawImage(base_image, 100, 100);
  }
}
_

context.drawImage(base_image, 100, 100);をアプリケーションに適した値に更新してください。

ソース： https://stackoverflow.com/a/6011402/3969707

次に、キャンバスをデータに変換します。

_var jpegUrl = canvas.toDataURL("image/jpeg");
var pngUrl = canvas.toDataURL(); // PNG is the default
_

ソース： https://stackoverflow.com/a/15685877/3969707

9
Drew Faubion

fetchを使用して画像のデータURLを取得する方法は次のとおりです。

(async function() {
    let blob = await fetch("https://example.com/image.png").then(r => r.blob());
    let dataUrl = await new Promise(resolve => {
      let reader = new FileReader();
      reader.onload = () => resolve(reader.result);
      reader.readAsDataURL(blob);
    });
    // now do something with `dataUrl`
})();
5
user993683

これは、JavaScriptで画像を解析する必要があるため、JavaScriptで実行したいことではありません。これは、非常に低速です。画像を読み込んでから、関数の出力をimgタグに入れます。これにより、帯域幅の節約、複雑さの軽減、セキュリティの向上は行われません。

あなたの最善の策は、このサーバー側で行うことです。私はこれを過去に大成功に使用して、リンク/参照された外部リソースをまったく必要としないページを生成しました。 jsPDFの場合は、生のJavaScriptまたはjQueryを使用して、画像のデータを取得し、PDF作成プロセスに渡すことができます。

これはどこでも機能し、モバイルブラウザを完全にサポートしていないcanvasに頼ることはありません。

1
Liam