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>
网友回复
腾讯混元模型广场里都是混元模型的垂直小模型,如何api调用?
为啥所有的照片分辨率提升工具都会修改照片上的图案细节?
js如何在浏览器中将webm视频的声音分离为单独音频?
微信小程序如何播放第三方域名url的mp4视频?
ai多模态大模型能实时识别视频中的手语为文字吗?
如何远程调试别人的chrome浏览器获取调试信息?
为啥js打开新网页window.open设置窗口宽高无效?
浏览器中js的navigator.mediaDevices.getDisplayMedia屏幕录像无法录制SpeechSynthesisUtterance产生的说话声音?
js中mediaRecorder如何录制window.speechSynthesis声音音频并下载?
python如何直接获取抖音短视频的音频文件url?