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>
网友回复
python如何实现torrent的服务端进行文件分发p2p下载?
如何在浏览器中录制摄像头和麦克风数据为mp4视频保存下载本地?
go如何编写一个类似docker的linux的虚拟容器?
python如何写一个bittorrent的种子下载客户端?
ai能通过看一个网页的交互过程视频自主模仿复制网页编写代码吗?
ai先写功能代码通过chrome mcp来进行测试功能最后ai美化页面这个流程能行吗?
vue在手机端上下拖拽元素的时候如何禁止父元素及body的滚动导致无法拖拽完成?
使用tailwindcss如何去掉响应式自适应?
有没有直接在浏览器中运行的离线linux系统?
nginx如何保留post或get数据进行url重定向?