畫布與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

回答

相關問題