js图片数据转换操作

要识别图片类型，然后进行转换；

function btoimg(buffer) {

var mime;

var a = new Uint8Array(buffer);

var nb = a.length;

if (nb < 4)

return null;

var b0 = a[0];

var b1 = a[1];

var b2 = a[2];

var b3 = a[3];

if (b0 == 0x89 && b1 == 0x50 && b2 == 0x4E && b3 == 0x47)

mime = 'image/png';

else if (b0 == 0xff && b1 == 0xd8)

mime = 'image/jpeg';

else if (b0 == 0x47 && b1 == 0x49 && b2 == 0x46)

mime = 'image/gif';

else

return null;

var binary = "";

for (var i = 0; i < nb; i++)

binary += String.fromCharCode(a[i]);

var base64 = window.btoa(binary);

var image = new Image();

//image.onload = onLoad;

image.id = "upload";

image.src = 'data:' + mime + ';base64,' + base64;

return image;

}

、背景

今天项目中牵涉到一个html图片生成的需求，然后就发现了这个第三方的js -- html2canvas

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

二、说一下简明使用教程吧

①引入JS

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

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

// your code ...

</div>

③调用指定的方法

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通过使用插件对jpg文件属性信息进行读写

1、读取JPG属性信息

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

代码实现：

<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

其实Piexifjs功能已经支持了图片属性信息的读取和写入

代码实现：

<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";
//此处属性信息根据需要变更进行设置
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

在线咨询

上一篇：九大维度帮你选出最理想的HTML网页内容提取工具
下一篇：CSS盒子（Box）模型入门

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

js图片数据转换操作

、背景

二、说一下简明使用教程吧

三、附上主要代码段

您的项目需求