HTML中dom转成图片进行存储

HTML中dom转成图片进行存储

月光魔力鸭

2018-12-05 13:17 阅读 293 喜欢 2 html转图片 html2canvas

最近在做试卷相关的业务,碰到一个场景,需要将试卷在移动端进行卷面还原,考虑到在WEB端实现的A4的样式在移动端上不好实现且比较难看,最终选择通过图片进行预览,这样在移动端也可以进行缩放查看。

业务流程

流程比较简单,下面主要说下关于图片生成以及保存这部分的实现。

使用插件

html2canvas canvas转图片 图片上传保存

html2canvas

该插件可以实现,将某些HTML中的dom转化成canvas进行展现,使用非常简单,而且还原度相当高。 插件地址:http://html2canvas.hertzen.com/

使用起来超级简单:

html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas)
});

将canvas生成图片

代码如下:

let dataurl = canvas.toDataURL('image/png');

上面是将canvas转成base64的字符串,下面将字符串转成form表单中的File对象,然后通过异步将文件保存。

let dataurl = canvas.toDataURL('image/png');
let arr = dataurl.split(',');
let mime = arr[0].match(/:(.*?);/)[1];
let suffix = mime.split('/')[1];
let bstr = atob(arr[1]);
let n = bstr.length;
let u8arr = new Uint8Array(n);
while (n--) {
  u8arr[n] = bstr.charCodeAt(n)
}
//生成File对象
let file = new File([u8arr], `preview.${suffix}`, {type: mime});
let fd = new FormData();
fd.append("file",file);
fd.append("module","preview");
$.ajax({
    type : 'post',
    url : base+'/file/upload',
    data : fd,
    processData: false,
    contentType:false,
    success : function(res){
        if(res.success){
            resolve(res);
        }else{
            reject(res.msg);
        }
    },
    error : function(e){
        reject("图片信息保存失败,请刷新后重试!");
    }
});

关于后台接受

至于下面后端接收图片并处理的这里简单放下代码就不说明了,我这是传到了FTP服务器上保存的,后端是基于spring-boot框架实现的。

/**
 * 单文件上传
 *
 * @param file
 * @param request
 * @return
 */
@PostMapping("/upload")
@ResponseBody
public Map upload(@RequestParam("file") MultipartFile file, HttpServletRequest request) {
    //返回MAP 给前台数据使用
    String module = request.getParameter("module");
    Map map = new HashMap();
    if (!file.isEmpty()) {
        try {
            String fileName = file.getOriginalFilename();
            Attachment attach = new Attachment();
            attach.setId(new Uuid().getUUID());
            attach.setSystem("smartteaching");
            attach.setFileName(fileName);
            attach.setModule(module);
            attach.setSuffix(FileUtil.getFileExt(fileName));
            FtpStorageHandlerImpl fshl = new FtpStorageHandlerImpl();
            fshl.upload(file.getInputStream(), attach);
            map.put("filePath", attach.getFilePath());
            map.put("fileSize", file.getSize());
            map.put("fileName", attach.getFileName());
            map.put("suffix", attach.getSuffix());
            map.put("success", true);
        } catch (IOException e) {
            e.printStackTrace();
            map.put("success", false);
            map.put("msg", "上传失败");
        }

        return map;
    } else {
        map.put("success", false);
        map.put("msg", "文件不存在或为空");
        return map;
    }
}

结束

到了这一步,完整的从前端将DOM生成图片,并将图片上传至后端就完成了。

转载请注明出处: https://chrunlee.cn/article/html-2-canvas-png.html


感谢支持!

赞赏支持
提交评论
评论信息(请文明评论)
暂无评论,快来快来写想法...
推荐
jsQR 是一款纯粹的由javascript实现的二维码识别库,可以在浏览器端使用,也可以在后端node.js环境使用。我之前使用过其他的识别库,例如:qrcode-reader 或其他,在使用上都比较麻烦,而且识别率并不高。jsQR是后来发现的,感觉(没有实际对比验证)jsQR识别率要更高些,使用起来也更简单,不需要安装其他依赖软件。
java 对象中有很多引用,甚至会出现循环引用,比如 user 对象中有 school 对象,school 对象中又有 user 对象,这样在对 user 对象序列化的时候,就会出现死循环,导致内存溢出。通过一定的方式,将每个对象增加ID 和 REF 引用标识最终可以解决这个问题
关于web打印,需要对页面内容进行页面样式设置,呈现出分页的样子,同时对于题目中的图片或表格尽量不分到两个页面中,因此实现了一个jquery的web打印插件,当然,这个插件目前只适用于部分情况,仅供借鉴
关于jquery,他的核心特点就是无new构造和链式调用,这里根据网上的资料,自己简单理解下,有助于消化核心代码。
业务中有一段涉及到处理canvas的图片然后将内容进行上传,后测试发现在IE中不好使哎...
this 是 JavaScript 的一大难点,多年经验的前端程序员都可能对这方面模糊。this 在大量的函数、类库中都有使用,理清显式绑定和隐式绑定有助于理解或书写这类函数。
需求如下:有一张大图,需要显示大图中的一小部分,目前能知道的时候小图的宽高和坐标,同时大图有一个旋转角度可以知道,目标就是把小图正确的显示出来。
在文件上传的时候,经常会对文件的mime进行限制,比如图片 image/jpg 等,让用户可以选择图片,而不是其他的文件。