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>
网友回复
如何编写一个chrome插件实现多线程高速下载大文件?
cdn版本的vue在网页中出现typeerror错误无法找到错误代码位置怎么办?
pywebview能否使用webrtc远程控制共享桌面和摄像头?
pywebview6.0如何让窗体接受拖拽文件获取真实的文件路径?
如何在linux系统中同时能安装运行apk的安卓应用?
python有没有离线验证码识别ocr库?
各家的ai图生视频及文生视频的api价格谁最便宜?
openai、gemini、qwen3-vl、Doubao-Seed-1.6在ui截图视觉定位这款哪家更强更准?
如何在linux上创建一个沙箱隔离的目录让python使用?
pywebview如何使用浏览器自带语音识别与webspeech 的api?