画布与PNG + alpha通道JPEG数据Url

我正在使用JS裁剪库。裁剪完成后，裁剪器会给我一张画布，以便我可以获取数据并将裁剪后的图片上传到我的服务器。画布与PNG + alpha通道JPEG数据Url

目前它可以正常工作，但在将画布转换为PNG数据网址时，因为我希望我的输出图片非常大（这是一个横幅），所以上传实际上需要大量时间，所以我更喜欢使用JPEG这似乎压缩更好的大图片。但JPEG没有alpha通道，所以它似乎必须用背景替换它（我选择我的颜色：白色）。

因此，有人可以告诉我怎么到画布转换为传输数据的URL在JPEG当原始图像是这样的：

这是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，然后我得到一个黑色的图片。

来源

2015-12-29 Sebastien Lorber

只需创建一个新的画布，你先画的背景颜色，然后想要的画布图像：

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-29 12:02:57 Kaiido

画布与PNG + alpha通道JPEG数据Url

回答

相关问题