1

私はJSクロッパーライブラリを使用しています。トリミングが完了すると、クロッパーがキャンバスを提供してくれるので、データを取得してトリミングした画像をサーバーにアップロードできます。

現在は正常に動作しますが、キャンバスを PNG データの URL に変換するとき、出力画像を非常に大きくしたいので (バナーです)、アップロードに実際には多くの時間がかかるため、圧縮されているように見える JPEG を使用することを好みます。より良い大きな写真。ただし、JPEG にはアルファ チャネルがないため、背景に置き換える必要があるようです (色: 白を選択します)。

元の画像が次のような場合に、そのキャンバスを JPEG のデータ URL に変換する方法を教えてください。

アルファ付きのアイコン

PNGで警告アイコンを切り抜いた画像です。背景はアルファで、いくつかの黒い描画があります。

私はいくつかの試みをしましたが、キャンバスに長方形を描くと、最初の絵の上に描かれるようです。クロッパー ライブラリが既に構築されたキャンバスを提供するため、画像が追加される前に四角形を描画できません。

canvasToDataUrl(cropper) {
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = '#ffffff';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    return canvas.toDataURL("image/jpeg",1);
},

これを行うと、最後に白い画像しか得られません。

四角形を描画せずに JPEG に変換しようとすると、黒い画像が表示されます。

4

1 に答える 1

4

最初に背景色を描画し、次に必要なキャンバス画像を描画する新しいキャンバスを作成するだけです:

function canvasToDataURL(canvas){
    // use cloneNode(true) to get the same width/height as your previous canvas
    var exporter = canvas.cloneNode(true);
    var ctx = exporter.getContext('2d');
    // first fill set our background
    ctx.fillStyle = 'white';
    ctx.fillRect(0,0,exporter.width, exporter.height);
    // yes you can draw a canvas onto a canvas
    ctx.drawImage(canvas, 0,0);
    var dataURL = exporter.toDataURL('image/jpeg');
    return dataURL;
}

// simulate the cropper canvas
var cropper = document.createElement('canvas');
var img = new Image();
img.onload = function(){
  cropper.width = this.width/2;
  cropper.height = this.height/2;
  cropper.getContext('2d').drawImage(this, 0,0);
  // here we pass the canvas, not the img
  result.src = canvasToDataURL(cropper);
  }
img.crossOrigin = 'anonymous';
img.src = "https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png";
body { background-color: ivory; }
<img id="result"/>

于 2015-12-29T12:02:57.953 に答える