保存包含画布绘图的 html 画布背景图像答案

【问题标题】：Saving html canvas background image with canvas drawing included保存包含画布绘图的 html 画布背景图像
【发布时间】：2020-04-01 18:05:14
【问题描述】：

是否有可能在用户完成他们的绘图并保存他们所做的 backgroundImage 和绘图之后？

 var canvas = document.getElementById("canvas"); // comes from html
 var context = canvas.getContext("2d"); // get context of canvas

 canvas.style.backgroundImage = `url(${value.result.questionImage})`; // images comes from sql database.

 // user does some drawing on the canvas...

【问题讨论】：

你试过 canvas.toDataURL() 吗？
是的，canvas.toDataURL() 只是获取用户在画布上所做的绘图。不知何故，我需要结合 canvas.style.backgroundImage + 图纸。

标签： javascript html5-canvas

【解决方案1】：

您应该在画布上绘制背景图像，而不是使用样式：

 var canvas = document.getElementById("canvas"); // comes from html
 var context = canvas.getContext("2d"); // get context of canvas

 var image = document.createElement('img')
 image.onload = ()=>context.drawImage(image, 0,0);
 image.src=value.result.questionImage;

现在，当您获取数据 url 时，也将使用问题图像，因为它现在是画布的普通部分。

【讨论】：