html2canvas 将html转成图片,并传给后端

榴莲不好吃

已于 2022-04-20 16:56:59 修改

阅读量3k

点赞数 1

分类专栏：基础文章标签：前端

于 2022-04-15 15:50:43 首次发布

本文链接：https://blog.csdn.net/sllailcp/article/details/124196383

版权

基础专栏收录该内容

30 篇文章 4 订阅

订阅专栏

这篇博客探讨了如何使用html2canvas库将HTML元素转换为canvas，然后将canvas转换为图片并进行上传。主要涉及的功能包括：图片数据URL的转换、文件的创建、FormData的使用以及Ajax进行文件上传。同时，还介绍了模拟点击下载图片的方法。

摘要由CSDN通过智能技术生成

调用:
htmlTransImage('#app', { width: 300},
function(data){
	console.log(data)
},
function(err){
	console.log('上传失败')
})


function htmlTransImage(dom,arg,success,error) {
    html2canvas(document.querySelector('#app'), { width: arg.width || 'auto' }).then(function (canvas) {
        // mockClick(canvas,'#imageBox'); // 将图片存储到本地,且插入到页面上的img标签中展示
		var file = canvas.toDataURL("image/png");
        var formData = new FormData();
        var  blob = dataURLtoFile(file, 'image/jpeg')
        var  fileOfBlob = new File([blob], new Date() + '.jpg')
        formData.append('file', fileOfBlob);
        $.ajax({
            url: "/Manage/UpLoadImage",
            type: "post",
            data: formData,
            contentType: false,
            processData: false,
            success: function (res) {
                success(res)
            },
            error: function (err) {
                error(err)
            }
        });
    })
}

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

function mockClick(canvas,node){
 	var imgUrl = canvas.toDataURL('image/jpeg')
    var image = document.createElement('img')
    image.src = imgUrl
    // 将生成的图片放到 类名为 node 的元素中
    document.querySelector(node).appendChild(image)
    var  dom = document.createElement('a')
    dom.href = imgUrl
    // dom .download 后面的内容为自定义图片的名称
    dom .download = 'approval-process'
    dom .click()
}