用边框系统下载画布

Question

我想下载带有边框的画布。在屏幕上画布上有边框，但是当我下载画布时，它的边框不会出现。

let canvas=qrRef.current.querySelector("canvas")
canvas.style.border="black 30px solid"
 if(type=="PNG"){
    let image=canvas.toDataURL("image/png")
    let anchor=document.createElement("a");
    anchor.href=image;
    anchor.download=`qr-pollective.png`
    document.body.appendChild(anchor);
    anchor.click()
    document.body.removeChild(anchor)
}

Console.log(画布)

<canvas height="400" width="400" style="border: 30px solid black; border-radius: 5px; border-collapse: collapse;">

Answer 1

你能做的就是创造一个更大的画布，它有黑色边框的空间。

然后将您创建的画布复制到这个更大的画布上，由30 to抵消，为边框腾出空间。

然后绘制构成边框的4个黑色矩形。这个更大的画布就是你想要下载的。

​

const canvas = document.querySelector('canvas');
const biggerCanvas = document.createElement('canvas');
const w = canvas.width + 60;
const h = canvas.height + 60;
biggerCanvas.width = w;
biggerCanvas.height = h;
const ctx = biggerCanvas.getContext('2d');
ctx.drawImage(canvas, 30, 30);
ctx.beginPath();
ctx.rect(0, 0, w, 30);
ctx.fillStyle = "black";
ctx.fill();
ctx.rect(0, 0, 30, h);
ctx.fill();
ctx.rect(w - 30, 0, w - 30, h);
ctx.fill();
ctx.rect(0, h - 30, w, h);
ctx.fill();
document.body.append(biggerCanvas); //just to show it has drawn the border

<canvas height="400" width="400" style="border: 30px solid black; border-radius: 5px; border-collapse: collapse;">

​

Answer 2

我用html2canvas解决了我的问题这里是我的代码

html2canvas(canvas,{backgroundColor: "transparent"}).then(function (canvas) {
           var myImage = canvas.toDataURL();
           downloadURI(myImage, `qr-pollective.png`);
});

function downloadURI(uri, name) {
      var link = document.createElement("a");
   
      link.download = name;
      link.href = uri;
      document.body.appendChild(link);
      link.click();   

    }