标签：canvas html2canvas let file var 服务器 canvas1 document

1.首先将html保存为base64图片

html2canvas.js(可在各cdn进行下载)
eg: cdn.bootcss.com/html2canvas…

html2canvas百度一下代码很多，这里废话不多说，直接上代码
因为是将html里部分保存为图片，所以以下代码实现的是全屏画布上展示需要的部分

    var canvas1 = document.createElement("canvas");
    let _canvas = document.querySelector('.resDetailRight');//目标块
    var bodyW = parseInt(window.getComputedStyle(document.querySelector('html')).width)
    var bodyH = parseInt(window.getComputedStyle(document.querySelector('html')).height)
    var footH = parseInt(window.getComputedStyle(document.querySelector('.recommend-resume')).height) //多余部分
    console.log('canvas:', bodyW, bodyH)
    //将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了
    canvas1.width = bodyW * 2;
    canvas1.height = (bodyH - footH) * 2;
    canvas1.style.width = bodyW + "px";
    canvas1.style.height = bodyH - footH + "px";
    //关于截取不全的操作，点击触发时需要从顶部获取，故在此将页面滚动到顶部然后在执行
    document.documentElement.scrollTop = 0;
    document.body.scrollTop = 0;
    var context = canvas1.getContext("2d");
    context.scale(2, 2);
    html2canvas(_canvas, {
      canvas: canvas1
    }).then(function (canvas) {
       //document.body.appendChild(canvas); //直接在底部展示该图
       file = canvas.toDataURL("image/png");
       //canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载
       // document.querySelector(".down").setAttribute('href', canvas.toDataURL());
    });

2.将获取的图片转换为文件格式

    dataURLtoFile(dataURI, type) {
	let binary = atob(dataURI.split(',')[1]);
	let array = [];
	for(let i = 0; i < binary.length; i++) {
            array.push(binary.charCodeAt(i));
	}
	return new Blob([new Uint8Array(array)], {type:type });
    }

3.通过ajax将文件传给后端服务器

    var formData = new FormData();
    let blob= dataURLtoFile(file, 'image/jpeg')
    let fileOfBlob = new File([blob], new Date()+'.jpg')
        formData.append('file', fileOfBlob);
        $.ajax({
        url: "/gateway/system/plug/resume/upload",
        type: "post",
        data: formData,
        headers:{
           'Authorization':'bearer '+sessionStorage.getItem("token")
        },
        contentType: false,
        processData: false,
        success: function (res) {
            let resumeInfo = res.result
		//sendResumeInfo(tabId, resumeInfo)
		checkRepeat(tabId, JSON.stringify(resumeInfo))
        },
        error: function (data) {
            alert("上传失败")
            }
       });

至此功能开发完成。

标签：canvas,html2canvas,let,file,var,服务器,canvas1,document
来源： https://blog.csdn.net/qq_29528701/article/details/120163572

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。