canvas绘图 是运用画笔在画布上一个一个画出元素或者裁剪元素的大小达到头像还有文字海报等效果
html2-canvas 是基于html本身的div（dom）来对网页进行截图并转存为img，可以和它搭配的有image.js（还不会）,关于图片放大模糊的问题，使用0.5.0-beta4版本的html2-canvas.js
https://www.bootcdn.cn/html2canvas///canvas
//js
draw();
// tijiaoHaibao();
// 操作canvas
function draw() {
console.log("draw");
var canvas = document.getElementById("photoImgCan");
canvas.width = 681;
canvas.height = 964;
canvas.y = 0;
canvas.x = 0;
function circleImg(ctx, img, x, y, r) {
ctx.save();
var d = 2 * r;
var cx = x + r;
var cy = y + r;
ctx.arc(cx, cy, r, 0, 2 * Math.PI);
ctx.clip();
ctx.drawImage(img, x, y, d, d);
ctx.restore();
}
var ctx = canvas.getContext("2d");
var a = 5;
var b = 1;
var rand = parseInt(Math.random() * (a - b + 1) + b);
var imgBg = new Image();
var imgwxhead = new Image();
var imgewm = new Image();
var wenzi = "";
imgBg.src = "img/mp_s" + rand + ".png";
imgBg.onload = function() {
console.log("imgBg");
console.log(imgBg);
ctx.drawImage(this, 0, 0);
// alert("wxhead:"+wxhead);
// imgwxhead.setAttribute('crossOrigin', 'anonymous');
// imgwxhead.src = wxhead;
// picLoaded++;
tijiaoHaibao();
};
}
// 存canvas图片
function tijiaoHaibao() {
console.log("tjiao");
var mycanvas = document.getElementById("photoImgCan");
console.log("1===" + mycanvas);
new_dataURL = mycanvas.toDataURL("image/jpeg", 0.7);
// new_dataURL = mycanvas.toDataURL("image/png");
// mycanvas.onload = function() {
// new_dataURL = mycanvas.toDataURL();
// $(".final").attr("src", new_dataURL);
// }
// new_dataURL = mycanvas.toDataURL();
console.log("new_dataURL:" + new_dataURL);
$("#photoImgCan").hide();
$(".photoImgCan2").attr("src", new_dataURL);
// my_img.onload = function(){ var url=canvas.toDataURL("image/png",1); my_img.src=url;}
// $(".shengcheng").hide();
// mySwiper.slideTo(4, 1000, false);
// swiperAnimate(mySwiper);
// isshake = 1;
// myShakeEvent.start();
// setTimeout('$(".shou").show().addClass("flash2")', 3000);// html2-canvas (其中包括ajax数据请求，以及写假数据，验证手机号等) （2个版本，一个canvas，一个h2）
//h2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script src="js/rem.js"></script>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<script src="js/canvas2image.js"></script>
<link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
<link rel="stylesheet" type="text/css" href="css/config.css"/>
<!-- 个人 -->
<script src="js/index.js"></script>
<!-- <script src="js/my.js"></script> -->
<link rel="stylesheet" type="text/css" href="css/zhy.css?v=1.2"/>
<style>
.cont {position: absolute;width: 2rem;height: 2rem;top: 2rem;left: 0.33rem;}
.Name {position: absolute;width: 2rem;height: 2rem;top: 2.5rem;left: 0.33rem;font-size: 0.5rem;color: #FFFFFF;}
</style>
</head>
<body>
<!-- 授权 -->
<!-- <div class="shouquan pos-ab">
<img src="img/p1_share01.png" class="p1_share01 pos-ab">
<img src="img/p1_share02.png" class="p1_share02 pos-ab">
<input type="tel" class="input01 pos-ab" id="phone" maxlength="11" placeholder="请输入手机号"/>
<img src="img/sh-btn_03.png" class="sh-btn pos-ab">
</div> -->
<div class="share01 pos-ab">
<div class="draw pos-ab">
<img src="img/p1_jtbj.png?v=1.2" class="jtbj pos-ab">
<img src="img/p1_jt01.png" class="jt01 pos-ab">
<img src="img/p1_jt02.png" class="jt02 pos-ab">
<img src="img/p1_jt04.png" class="jt04 pos-ab">
<img src="img/p1_logo.png" class="jtlogo pos-ab">
<img src="img/p1_jt05.png" class="jt05 pos-ab">
<img src="img/p1_jt06.png" class="jt06 pos-ab">
<img src="img/p1_jt07.png" class="jt07 pos-ab">
<img src="img/p1_jt08.png" class="jt08 pos-ab">
<div class="jt09 pos-ab">
<img src="img/p1_jt09.png" class="pos-ab">
</div>
<div class="jt10 pos-ab">
<img src="img/p1_jt10.png" class="pos-ab">
</div>
<!-- <p class="jt11 pos-ab down" style="z-index: 99999999;">
<img src="img/p1_jt11.png" >
</p> -->
<img src="img/p1_jttx.png" class="jttx pos-ab">
<img src="" class="save02 pos-ab" style="width: 100%;height: 100%;opacity:0;color:red;background:red;">
</div>
<p class="jt11 pos-ab down" style="z-index: 99999999;">
<img src="img/p1_jt11.png" >
</p>
</div>
<div class="main01">
<img src="img/p1_logo.png" class="logo pos-ab">
<div class="p1_bj pos-ab full">
<img src="img/p1_01.png" class="full">
</div>
<img src="img/p1_05.png" class="p1_05 pos-ab">
<div class="home_c">
<img src="img/p1_02.png" class="p1_02 pos-ab">
<img src="img/p1_04.png" class="p1_04 pos-ab">
<a href="tel:18688888888" class="p1_tel01 pos-ab">
<img src="img/p1_tel01.png" >
</a>
<a href="tel:027-85743649" class="p1_tel02 pos-ab">
<img src="img/p1_tel02.png" >
</a>
<img src="img/p1_tel03.png" class="p1_tel03 pos-ab">
<a href="tel:18688888888" class="moble pos-ab">Moble: </a>
<a href="tel:027-85743649" class="moble2 pos-ab">Tel: </a>
<div class="share">
<img src="img/p1_share.png" class="p1_share pos-ab">
</div>
<ul class="cont"></ul>
<ul class="Name"></ul>
</div>
<!-- 菜单 -->
<div class="nav_bottom">
<img src="img/p1_03.png" class="nav_bj pos-ab">
<img src="img/mp.png" class="mp pos-ab">
<img src="img/js.png" class="js pos-ab">
<img src="img/yw.png" class="yw pos-ab">
<img src="img/al.png" class="al pos-ab">
<em></em>
</div>
</div>
<script src="js/rem.js"></script>
<script src="js/swiper.min.js"></script>
<script>
// window.location.href="case.html";
var swiper = new Swiper(".mySwiper", {
direction: "vertical",
loop:false,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
//验证手机号
$(".sh-btn").click(function(){
var tel = document.getElementById("phone");
if(!tel.value) {
alert("请输入您的联系方式！");
tel.focus();
return false;
}
if(!/^1[0-9]{10}$/.test(tel.value)) {
alert("手机号格式不正确！");
tel.focus();
return false;
}
$(".shouquan").hide();
})
//打印id
function getQueryVariable(variable)
{
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == variable){return pair[1];}
}
return(false);
}
var id = getQueryVariable("id")
console.log(id)
function getList(){
$.ajax({
url:'https://wx.whyimingkeji.com/zcivcase/index.php?minpian-minpian_info',
type:'post',
dataType:'json',
data:{id:1},
success:function(res){
console.log(res.return_msg);
var str="";
str += "<img src=" + res.return_data.backgroundimg + ">";
Name01 = res.return_data.truename;
tel01 ="tel:" + res.return_data.mobile;
tel02 ="tel:" + res.return_data.tel;
tel01_h = res.return_data.mobile;
tel02_h = res.return_data.tel;
$(".p1_bj").append(str);
$(".Name").append(Name01);
$(".p1_tel01").attr("href", tel01);
$(".p1_tel02").attr("href", tel02);
$(".moble").attr("href", tel01);
$(".moble").append(tel01_h);
$(".moble2").attr("href", tel01);
$(".moble2").append(tel02_h);
},
error:function(XMLHttpRequest,textStatus,errThrown){
console.log(XMLHttpRequest.status);
console.log(XMLHttpRequest.readyState);
console.log(textStatus);
alert("网络繁忙");
}
});
}
getList();
//创建一个新的canvas
var canvas2 = document.createElement("canvas");
let _canvas = document.querySelector('.draw'); //需要替换成图片的html区域
var w = parseInt(window.getComputedStyle(_canvas).width);
var h = parseInt(window.getComputedStyle(_canvas).height);
//将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了
canvas2.width = w*4;
canvas2.height = h*4;
canvas2.style.width = w + "px";
canvas2.style.height = h + "px";
//可以按照自己的需求，对context的参数修改,translate指的是偏移量
// var context = canvas.getContext("2d");
// context.translate(0,0);
var context = canvas2.getContext("2d");
context.fillStyle = 'rgba(255, 255, 255, 0)'
context.translate(-29,-80);
context.scale(4,4);
html2canvas(document.querySelector('.draw'), { canvas: canvas2 }).then(function(canvas) {
// document.body.appendChild(canvas);
//canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载
// document.querySelector(".down").setAttribute('href', canvas.toDataURL());
// $(".save02").attr("src", canvas.toDataURL());
var mycanvas = document.getElementsByClassName(".draw");
console.log("1===" + mycanvas);
new_dataURL = canvas.toDataURL("image/jpeg", 0.7);
console.log("new_dataURL:" + new_dataURL);
// $(".draw").hide();
$(".save02").attr("src", new_dataURL);
});
//假数据
// var list1={
// "id":"1",
// "img":"img/p1_01.png",
// "name":"王二 ufo",
// "tel":"18488888888",
// "tel02":"027-84743649 / 027-83743649"
// }
// var list2={
// "id":"2",
// "img":"img/p1_01.png",
// "name":"fdsfdsf ufo",
// "tel":"18488888888",
// "tel02":"027-84743649 / 027-83743649"
// }
// var totList=[list1,list2];
// if(id==1){
// var str="";
// str += "<img src=" + list1.img + ">";
// Name01 = list1.name;
// tel01 ="tel:" + list1.tel;
// tel02 ="tel:" + list1.tel02;
// tel01_h = list1.tel;
// tel02_h = list1.tel02;
// $(".p1_bj").append(str);
// $(".Name").append(Name01);
// $(".p1_tel01").attr("href", tel01);
// $(".p1_tel02").attr("href", tel02);
// $(".moble").attr("href", tel01);
// $(".moble").append(tel01_h);
// $(".moble2").attr("href", tel01);
// $(".moble2").append(tel02_h);
// }else(id==2)
// var str="";
// str += "<img src=" + list2.img + ">";
// Name01 = list2.name;
// tel01 ="tel:" + list2.tel;
// tel02 ="tel:" + list2.tel02;
// tel01_h = list2.tel;
// tel02_h = list2.tel02;
// $(".p1_bj").append(str);
// $(".Name").append(Name01);
// $(".p1_tel01").attr("href", tel01);
// $(".p1_tel02").attr("href", tel02);
// $(".moble").attr("href", tel01);
// $(".moble").append(tel01_h);
// $(".moble2").attr("href", tel01);
// $(".moble2").append(tel02_h);
</script>
</body>
</html>html2canvas头像圆角不能绘制的问题：
1：检查线上图片路径，如果本地圆角能出现，有限考虑是否跨域的问题（https），在后台接口那里增加一段js代码：
function update_url(url){
if (url.indexOf("https:") < 0) {
url = url.replace("http:", "https:");
}
return url;
}
//接口数据
var tx = update_url(res.data.backgroundImg)
//再传值
$(".aa").append("src",tx)canvas
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script src="js/rem.js"></script>
<script src="js/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
<link rel="stylesheet" type="text/css" href="css/config.css"/>
<!-- 个人 -->
<script src="js/index.js"></script>
<!-- <script src="js/my.js"></script> -->
<link rel="stylesheet" type="text/css" href="css/zhy.css"/>
<style>
.cont {position: absolute;width: 2rem;height: 2rem;top: 2rem;left: 0.33rem;}
.Name {position: absolute;width: 2rem;height: 2rem;top: 2.5rem;left: 0.33rem;font-size: 0.5rem;color: #FFFFFF;}
</style>
</head>
<body>
<!-- 分享 -->
<div class="share01 pos-ab none">
<div class="draw pos-ab">
<img src="img/p1_jtbj.png?v=1.4" class="jtbj pos-ab">
<em class="p1_jtName pos-ab"></em>
<em class="p1_jtZhiwei pos-ab"></em>
<img src="img/p1_jt01.png" class="jt01 pos-ab">
<img src="img/p1_jt02.png" class="jt02 pos-ab">
<img src="img/p1_jt04.png" class="jt04 pos-ab">
<img src="img/p1_logo.png" class="jtlogo pos-ab">
<img src="img/p1_jt05.png" class="jt05 pos-ab">
<img src="img/p1_jt06.png" class="jt06 pos-ab">
<img src="img/p1_jt07.png" class="jt07 pos-ab">
<img src="img/p1_jt08.png" class="jt08 pos-ab">
<div class="jt09 pos-ab">
<img src="img/p1_jtmoble.png" class="jtmoble pos-ab">
<em class="p1_jttel pos-ab"></em>
</div>
<div class="jt10 pos-ab">
<img src="img/p1_jtemail.png" class="jtemail pos-ab">
<em class="p1_jtemail pos-ab"></em>
</div>
<!-- <div class="headImg-div pos-ab">
<div class="jttx1 pos-ab">
<img src="img/p1_01.png" class="jttx1_h">
</div>
</div> -->
<div class="headImg-div pos-ab">
<img src="" class="jttx1 pos-ab">
</div>
<img src="" class="save02 pos-ab">
</div>
<p class="jt11 pos-ab down" style="z-index: 99999999;">
<img src="img/p1_jt11.png" >
</p>
</div>
</div>
<script src="js/rem.js"></script>
<script src="js/swiper.min.js"></script>
<script>
// window.location.href="case.html";
var swiper = new Swiper(".mySwiper", {
direction: "vertical",
loop:false,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
//验证手机号
$(".sh-btn").click(function(){
var tel = document.getElementById("phone");
if(!tel.value) {
alert("请输入您的联系方式！");
tel.focus();
return false;
}
if(!/^1[0-9]{10}$/.test(tel.value)) {
alert("手机号格式不正确！");
tel.focus();
return false;
}
$(".shouquan").hide();
})
// var str="";
// for(var i=0;i<list.length;i++){
// str += "<li><img src=" + list[i].img + "/><lable>"+ list[i].name + "</lable></li>";
// }
// $(".cont").append(str);
function getQueryVariable(variable)
{
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == variable){return pair[1];}
}
return(false);
}
var id = getQueryVariable("id")
console.log(id)
function getList(){
$.ajax({
url:'https://wx.whyimingkeji.com/zcivcase/index.php?minpian-minpian_info',
type:'post',
dataType:'json',
data:{id:1},
success:function(res){
console.log(res.return_msg);
var str="";
str += "<img src=" + res.return_data.backgroundimg + ">";
Name01 = res.return_data.truename;
tel01 ="tel:" + res.return_data.mobile;
tel02 ="tel:" + res.return_data.tel;
tel01_h = res.return_data.mobile;
tel02_h = res.return_data.tel;
$(".p1_bj").append(str);
$(".Name").append(Name01);
$(".p1_tel01").attr("href", tel01);
$(".p1_tel02").attr("href", tel02);
$(".moble").attr("href", tel01);
$(".moble").append(tel01_h);
$(".moble2").attr("href", tel01);
$(".moble2").append(tel02_h);
},
error:function(XMLHttpRequest,textStatus,errThrown){
console.log(XMLHttpRequest.status);
console.log(XMLHttpRequest.readyState);
console.log(textStatus);
alert("网络繁忙");
}
});
}
getList();
// function xuanranData(){
// var str="";
// str += "<img src=" + res.return_data.backgroundimg + ">";
// Name01 = res.return_data.truename;
// tel01 ="tel:" + res.return_data.mobile;
// tel02 ="tel:" + res.return_data.tel;
// tel01_h = res.return_data.mobile;
// tel02_h = res.return_data.tel;
// $(".p1_bj").append(str);
// $(".Name").append(Name01);
// $(".p1_tel01").attr("href", tel01);
// $(".p1_tel02").attr("href", tel02);
// $(".moble").attr("href", tel01);
// $(".moble").append(tel01_h);
// $(".moble2").attr("href", tel01);
// $(".moble2").append(tel02_h);
// }
// if(id==1){
// var str="";
// str += "<img src=" + res.return_data.backgroundimg + ">";
// Name01 = res.return_data.truename;
// tel01 ="tel:" + res.return_data.mobile;
// tel02 ="tel:" + res.return_data.tel;
// tel01_h = res.return_data.mobile;
// tel02_h = res.return_data.tel;
// $(".p1_bj").append(str);
// $(".Name").append(Name01);
// $(".p1_tel01").attr("href", tel01);
// $(".p1_tel02").attr("href", tel02);
// $(".moble").attr("href", tel01);
// $(".moble").append(tel01_h);
// $(".moble2").attr("href", tel01);
// $(".moble2").append(tel02_h);
// }
// else(id==2)
// var str="";
// str += "<img src=" + list2.img + ">";
// Name01 = list2.name;
// tel01 ="tel:" + list2.tel;
// tel02 ="tel:" + list2.tel02;
// tel01_h = list2.tel;
// tel02_h = list2.tel02;
// $(".p1_bj").append(str);
// $(".Name").append(Name01);
// $(".p1_tel01").attr("href", tel01);
// $(".p1_tel02").attr("href", tel02);
// $(".moble").attr("href", tel01);
// $(".moble").append(tel01_h);
// $(".moble2").attr("href", tel01);
// $(".moble2").append(tel02_h);
//假数据
// var list1={
// "id":"1",
// "img":"img/p1_01.png",
// "name":"王二 ufo",
// "tel":"18488888888",
// "tel02":"027-84743649 / 027-83743649"
// }
// var list2={
// "id":"2",
// "img":"img/p1_01.png",
// "name":"fdsfdsf ufo",
// "tel":"18488888888",
// "tel02":"027-84743649 / 027-83743649"
// }
// var totList=[list1,list2];
// if(id==1){
// var str="";
// str += "<img src=" + list1.img + ">";
// Name01 = list1.name;
// tel01 ="tel:" + list1.tel;
// tel02 ="tel:" + list1.tel02;
// tel01_h = list1.tel;
// tel02_h = list1.tel02;
// $(".p1_bj").append(str);
// $(".Name").append(Name01);
// $(".p1_tel01").attr("href", tel01);
// $(".p1_tel02").attr("href", tel02);
// $(".moble").attr("href", tel01);
// $(".moble").append(tel01_h);
// $(".moble2").attr("href", tel01);
// $(".moble2").append(tel02_h);
// }else(id==2)
// var str="";
// str += "<img src=" + list2.img + ">";
// Name01 = list2.name;
// tel01 ="tel:" + list2.tel;
// tel02 ="tel:" + list2.tel02;
// tel01_h = list2.tel;
// tel02_h = list2.tel02;
// $(".p1_bj").append(str);
// $(".Name").append(Name01);
// $(".p1_tel01").attr("href", tel01);
// $(".p1_tel02").attr("href", tel02);
// $(".moble").attr("href", tel01);
// $(".moble").append(tel01_h);
// $(".moble2").attr("href", tel01);
// $(".moble2").append(tel02_h);
// xuanranData();
// function xuanranData(index)
// {
// var str="";
// str += "<img src=" + totList.img + ">";
// Name01 = totList.name;
// tel01 ="tel:" + totList.tel;
// tel02 ="tel:" + totList.tel02;
// tel01_h = totList.tel;
// tel02_h = totList.tel02;
// $(".p1_bj").append(str);
// $(".Name").append(Name01);
// $(".p1_tel01").attr("href", tel01);
// $(".p1_tel02").attr("href", tel02);
// $(".moble").attr("href", tel01);
// $(".moble").append(tel01_h);
// $(".moble2").attr("href", tel01);
// $(".moble2").append(tel02_h);
// }
draw();
// 操作canvas
function draw () {
//创建一个新的canvas
var canvas2 = document.createElement("canvas");
let _canvas = document.querySelector('.draw'); //需要替换成图片的html区域
var w = parseInt(window.getComputedStyle(_canvas).width);
console.log(_canvas.width)
var h = parseInt(window.getComputedStyle(_canvas).height);
//将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了
canvas2.width = w*4;
canvas2.height = h*4;
canvas2.style.width = w + "px";
canvas2.style.height = h + "px";
//获取元素相对于视察的偏移量
var rect = _canvas.getBoundingClientRect();
//可以按照自己的需求，对context的参数修改,translate指的是偏移量
var context = canvas2.getContext("2d");
context.fillStyle = "#fff"
context.scale(4,4);
//设置context位置，值为相对于视窗的偏移量负值，让图片复位
context.translate(-rect.left,-rect.top);
html2canvas(document.querySelector('.draw'), {canvas:canvas2,useCORS:true}).then(function(canvas) {
convertCanvasToImage(canvas,w,h)
});
//图片转换base64
function convertCanvasToImage(canvas, w, h) {
// document.body.appendChild(canvas);
console.log(context.fillStyle )
//开始渲染
var mycanvas = document.getElementsByClassName(".draw");
console.log("1===" + mycanvas);
// new_dataURL = canvas.toDataURL("image/jpeg", 0.7);
new_dataURL = canvas.toDataURL("image/png", 0.7);
//console.log("new_dataURL:" + new_dataURL);
$(".save02").attr("src", new_dataURL);
}
};
// 存canvas图片
function tijiaoHaibao() {
console.log("tjiao");
var mycanvas = document.getElementById("photoImgCan");
console.log("1===" + mycanvas);
new_dataURL = mycanvas.toDataURL("image/jpeg", 0.7);
console.log("new_dataURL:" + new_dataURL);
$("#photoImgCan").hide();
$(".photoImgCan2").attr("src", new_dataURL);
}
</script>
</body>
</html>
157
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
