最近由于工作需要，查了好多资料，整理出了一份关于图片合成的代码，希望可以帮助大家，代码中还包含了跨域图片的下载，避开了不同源情况下，点击下载图片是打开访问而不是下载的情况。文中直接用了查阅时部分优秀代码，感谢他们的贡献。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--<img src="huodong3.png">
<img src="share.png">-->
<a href="javascript:;" class="down_btn_a">点击下载</a>
<img id="avatar" src=""/>
<div style="visibility: hidden;" id="qrcodeNode"></div>
</body>
<script src="qrcode.js"></script>
<script type="text/javascript" src="concatV/jquery-2.1.0.js" ></script>
<script>
let imgArr = ['http://www.baidu.com','httP://www.taobao.com','httP://www.bcuae.info.com','http://www.baidu.com','http://www.baidu.com','http://www.baidu.com','http://www.baidu.com','http://www.baidu.com','http://www.baidu.com'];
let a = Math.floor(Math.random()*10)
drawAndShareImage();
document.getElementById("qrcodeNode").innerHTML = "";
let qrcode = new QRCode("qrcodeNode", {
text: imgArr[a],
width: 249,
height: 249
});
function drawAndShareImage(){
var canvas = document.createElement("canvas");
canvas.width = 700;
canvas.height = 700;
var context = canvas.getContext("2d");
context.rect(0 , 0 , canvas.width , canvas.height);
context.fillStyle = "#fff";
context.fill();
var myImage = new Image();
myImage.src = "huodong3.png"; //背景图片 你自己本地的图片或者在线图片
myImage.crossOrigin = 'Anonymous';
myImage.onload = function(){
context.drawImage(myImage , 0 , 0 , 700 , 700);
context.font = "60px Courier New";
// context.fillText("我是文字",350,450);
src = document.getElementsByTagName("img")[1].src;
var myImage2 = new Image();
myImage2.src = src; //你自己本地的图片或者在线图片
myImage2.crossOrigin = 'Anonymous';
myImage2.onload = function(){
context.drawImage(myImage2 , 175 , 175 , 225 , 225);
var base64 = canvas.toDataURL("image/png"); //"image/png" 这里注意一下
var img = document.getElementById('avatar');
// document.getElementById('avatar').src = base64;
img.setAttribute('src' , base64);
//接下来进行事件绑定
var aBtn = $(".down_btn_a");
if (browserIsIe()) {
//是ie等,绑定事件
aBtn.on("click", function() {
var imgSrc = $(this).siblings("img").attr("src");
//调用创建iframe的函数
createIframe(imgSrc);
});
} else {
aBtn.each(function(i,v){
//支持download,添加属性.
var imgSrc = base64;
console.log(imgSrc)
$(v).attr("download",imgSrc);
$(v).attr("href",imgSrc);
})
}
}
}
}
//判断是否为Trident内核浏览器(IE等)函数
function browserIsIe() {
if (!!window.ActiveXObject || "ActiveXObject" in window){
return true;
}
else{
return false;
}
}
//创建iframe并赋值的函数,传入参数为图片的src属性值.
function createIframe(imgSrc) {
//如果隐藏的iframe不存在则创建
if ($("#IframeReportImg").length === 0){
$('<iframe style="display:none;" id="IframeReportImg" name="IframeReportImg" onload="downloadImg();" width="0" height="0" src="about:blank"></iframe>').appendTo("body");
}
//iframe的src属性如不指向图片地址,则手动修改,加载图片
if ($('#IframeReportImg').attr("src") != imgSrc) {
$('#IframeReportImg').attr("src",imgSrc);
} else {
//如指向图片地址,直接调用下载方法
downloadImg();
}
}
//下载图片的函数
function downloadImg() {
//iframe的src属性不为空,调用execCommand(),保存图片
if ($('#IframeReportImg').src != "about:blank") {
window.frames["IframeReportImg"].document.execCommand("SaveAs");
}
}
</script>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
