canvas中多种图片合成长图示例代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" /> </head> <body> <script type="text/javascript"> // 准备图片的URL var imageUrl1 = '//repo.bfw.wiki/bfwrepo/image/5d6539385ad28.png'; var imageUrl2 = '//repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png'; // 创建Canvas元素 var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); // 创建一个Promise用于加载图片 function loadImage(url) { return new Promise(function(resolve, reject) { var img = new Image(); img.crossOrigin = 'Anonymous'; // 设置跨域属性 img.onload = function() { resolve(img); }; img.src = url; }); } // 加载图片并绘制到Canvas上 Promise.all([loadImage(imageUrl1), loadImage(imageUrl2)]) .then(function(images) { // 设置Canvas的宽度和高度 canvas.width = Math.max(images[0].width, images[1].width); canvas.height = images[0].height + images[1].height; // 绘制第一张图片 ctx.drawImage(images[0], 0, 0); // 绘制第二张图片,位置在第一张图片下方 ctx.drawImage(images[1], 0, images[0].height); // 将Canvas导出为图片 var mergedImageUrl = canvas.toDataURL(); console.log(mergedImageUrl) var img = new Image(); img.src = mergedImageUrl; document.body.appendChild(img); // 合并后的图片DataURL // 在这里可以使用mergedImageUrl,比如显示在页面上或者下载 }) .catch(function(error) { console.error('Error loading images:', error); }); </script> </body> </html>
网友回复
DLNA与UPnP的区别和不同?
苏超自建抢票app,通过先预约再抽签化解高并发抢票?
python如何让给电脑在局域网中伪装成电视接收手机的投屏图片视频播放?
如何结合python+js如何自己的视频编码与加密播放直播?
python如何在电脑上通过局域网将本地视频或m3u8视频投屏电视播放?
腾讯视频爱奇艺优酷vip电影电视剧视频如何通过python绕过vip收费直接观看?
有没有可免费观看全球电视台直播m3u8地址url的合集?
有没有实现观影自由的免vip影视苹果 CMS V10 API的可用url?
python如何实时检测电脑usb插入检测报警?
如何判断真人操作的鼠标移动直线轨迹与机器操作的轨迹?