在 html5 中将多个画布转换为数据URL
convert multiple canvases to dataURL in html5
我想连接多个画布以制作单个图像。那么有没有办法掩盖多个画布来toDataURL
制作单个图像呢?
创建一个函数,该函数接受多个参数(canvas 元素),将它们放在一个空白画布上,然后返回新制作的画布的数据URL。
var getImadeData = function () {
var i = arguments.length,
tempCanvas = document.createElement("canvas"),
ctx = tempCanvas.getContext("2d");
while (i--) {
ctx.drawImage(arguments[i], 0, 0);
};
return tempCanvas.toDataURL();
};
现在只需将要放入一个数据URL中的多个画布元素提供给函数即可。
var newData = getImageData(canvas1, canvas2, canvas3);
在此示例中,最后一个画布首先放置在空白画布上,因此请确保对画布元素进行适当的排序。
是的
,画布 2D 呈现上下文上的 drawImage
方法接受画布元素作为图像元素。所以你所要做的就是:
- 创建新画布
- 获取其上下文
- 用
drawImage
绘制所有其他画布 - 从此新画布中提取最终图像
试试这个例子,希望它能帮助看到这里
//html block
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
</canvas>
<canvas id="myCanvas1" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<canvas id="Canvasimage" width="500" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<img id="finalimage" width="500" height="100" style="border:1px solid #c3c3c3;"/>
//script block
function loadImages(sources, callback) {
var images = {};
var loadedImages = 0;
var numImages = 0;
// get num of sources
for (var src in sources) {
numImages++;
}
for (var src in sources) {
images[src] = new Image();
images[src].onload = function () {
if (++loadedImages >= numImages) {
callback(images);
}
};
images[src].src = sources[src];
}
}
window.onload = function (images) {
//Canvas first here
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 200, 100);
//Canvas second here
var c1 = document.getElementById("myCanvas1");
var ctx1 = c1.getContext("2d");
ctx1.fillStyle = "#00FF00";
ctx1.fillRect(0, 0, 200, 100);
//Canvas final here.
var canvas = document.getElementById("Canvasimage");
var context = canvas.getContext("2d");
var sources = {
darthVader: c.toDataURL("image/png"),
yoda: c1.toDataURL("image/png")
};
loadImages(sources, function (images) {
context.drawImage(images.darthVader, 100, 30, 200, 137);
context.drawImage(images.yoda, 350, 55, 93, 104);
//finalimage here which has two canvas data
var finalimage = document.getElementById("finalimage");
finalimage.src = canvas.toDataURL("image/png");
});
};
相关文章:
- 将纯文本URL转换为可单击链接
- Java脚本将URL转换为已保存的URL时出错
- 如何在不在本地下载的情况下将url中提供的文件(pdf/doc)转换为json/string/base64格式
- 在JQuery中将页面翻转转换为自定义url
- 如何在jquery中将链接转换为seo友好的url
- JavaScript:将 URL 字符串转换为唯一标识符
- 我们如何将URL的PDF转换为convert.javascript中的ToBase64String
- 如何将本地文件路径转换为文件::?/url在node.js中的安全性
- 正在将URL转换为具有相同的输出
- 阻止Rails 4转换src-url
- 每当我试图将简单的图像源转换为数据URL时,就会出现安全错误异常
- 将URL的文本列表转换为可点击的HTML链接
- 角度相加“;“不安全”;在尝试下载文件时将其转换为url
- 将跨度内容(图像url)转换为图像(显示)
- 将 SVG 转换为图像时画布到 URL 功能出现问题
- 使用jQuery或Javascript将段落中的URL转换为链接
- 用于将 URL 和标记转换为定位点的标记
- 使用 javascript 将数据URL转换为文件
- Firefox 插件中的 OnBeforeRequest URL 重定向(从 Chrome 扩展程序转换)
- 转换url为html 标签和图像url到
用javascript正则表达式标记