、背景

今天項(xiàng)目中牽涉到一個(gè)html圖片生成的需求，然后就發(fā)現(xiàn)了這個(gè)第三方的js -- html2canvas

PS: 附上官方使用文檔 http://html2canvas.hertzen.com/

二、說(shuō)一下簡(jiǎn)明使用教程吧

①引入JS

可以在官方下載，也可以使用CDN

②在需要的html中指定操作元素

<div id="capture" style="padding:2rem;">

// your code ...

</div>

③調(diào)用指定的方法

export(){

html2canvas(document.querySelector("#capture")).then(canvas => {
saveFile(canvas.toDataURL(),"ccc.png");
});
}

saveFile(data, filename){
const save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
save_link.href = data;
save_link.download = filename;
const event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
save_link.dispatchEvent(event);
};

三、附上主要代碼段

avaScript通過(guò)使用插件對(duì)jpg文件屬性信息進(jìn)行讀寫

1、讀取JPG屬性信息

Exif.js 地址： https://github.com/exif-js/exif-js

代碼實(shí)現(xiàn)：

<script src="exif.js"></script>

EXIF.getData(document.getElementById('imgElement'), function(){
  EXIF.getAllTags(this);
  EXIF.getTag(this, 'Orientation');
  EXIF.getAllTags(this)
  EXIF.pretty(this);
});

引用信息：http://code.ciaoca.com/javascript/exif-js/

2、寫入JPG屬性信息

Piexifjs 地址：https://github.com/hMatoba/piexifjs

其實(shí)Piexifjs功能已經(jīng)支持了圖片屬性信息的讀取和寫入

代碼實(shí)現(xiàn)：

<script src="piexif.js"></script>

var zeroth = {};
var exif = {};
var gps = {};
zeroth[piexif.ImageIFD.Make] = "Make";
zeroth[piexif.ImageIFD.XResolution] = [777, 1];
zeroth[piexif.ImageIFD.YResolution] = [777, 1];
zeroth[piexif.ImageIFD.Software] = "Piexifjs";
zeroth[piexif.ImageIFD.Artist] = "作者";
exif[piexif.ExifIFD.DateTimeOriginal] = "2010:10:10 10:10:10";
exif[piexif.ExifIFD.LensMake] = "LensMake";
exif[piexif.ExifIFD.Sharpness] = 777;
exif[piexif.ExifIFD.LensSpecification] = [[1, 1], [1, 1], [1, 1], [1, 1]];
gps[piexif.GPSIFD.GPSVersionID] = [7, 7, 7, 7];
gps[piexif.GPSIFD.GPSDateStamp] = "1999:99:99 99:99:99";
//此處屬性信息根據(jù)需要變更進(jìn)行設(shè)置
var exifObj = {"0th":zeroth, "Exif":exif, "GPS":gps};
var exifbytes = piexif.dump(exifObj);
//插入屬性信息，生成新圖片
var newJpeg = piexif.insert(exifbytes, jpegData)

例子：

<input type="file" id="files" />
<script source="/js/piexif.js" />
<script>
function handleFileSelect(evt) {
    var file = evt.target.files[0];

    var zeroth = {};
    var exif = {};
    var gps = {};
    zeroth[piexif.ImageIFD.Make] = "Make";
    zeroth[piexif.ImageIFD.XResolution] = [777, 1];
    zeroth[piexif.ImageIFD.YResolution] = [777, 1];
    zeroth[piexif.ImageIFD.Software] = "Piexifjs";
    exif[piexif.ExifIFD.DateTimeOriginal] = "2010:10:10 10:10:10";
    exif[piexif.ExifIFD.LensMake] = "LensMake";
    exif[piexif.ExifIFD.Sharpness] = 777;
    exif[piexif.ExifIFD.LensSpecification] = [[1, 1], [1, 1], [1, 1], [1, 1]];
    gps[piexif.GPSIFD.GPSVersionID] = [7, 7, 7, 7];
    gps[piexif.GPSIFD.GPSDateStamp] = "1999:99:99 99:99:99";
    var exifObj = {"0th":zeroth, "Exif":exif, "GPS":gps};
    var exifbytes = piexif.dump(exifObj);

    var reader = new FileReader();
    reader.onload = function(e) {
        var inserted = piexif.insert(exifbytes, e.target.result);

        var image = new Image();
        image.src = inserted;
        image.width = 200;
        var el = $("<div></div>").append(image);
        $("#resized").prepend(el);
    };
    reader.readAsDataURL(file);
}

document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>

引用信息：https://piexifjs.readthedocs.io/en/latest/functions.html