</h1>
<div class="clear"></div>
<div class="postBody">
First picture:
The above picture is the conversion method of almost all picture types in js. Next, talk about several commonly used type conversions:
1. urltoImage(url,fn) will load the required image object through a url, where the url parameter is passed in the url of the image, fn is the callback method, including the parameters of an Image object, the code is as follows:
|
1
2
3
4
5
6
7
|
function
urltoImage (url,fn){
var
img =
new
Image();
img.src = url;
img.onload =
function
(){
fn(img);
}
};
|
2. imagetoCanvas(image) will transform an Image object into a Canvas type object, where the image parameter is passed in an Image object, the code is as follows:
|
1
2
3
4
5
6
7
8
|
function
imagetoCanvas(image){
var
cvs = document.createElement(
"canvas"
);
var
ctx = cvs.getContext(
'2d'
);
cvs.width = image.width;
cvs.height = image.height;
ctx.drawImage(image, 0, 0, cvs.width, cvs.height);
return
cvs ;
};
|
3. canvasResizetoFile(canvas,quality,fn) will compress a Canvas object into a Blob type object; the canvas parameter is passed in a Canvas object; the quality parameter is passed in a 0-1 number type, which indicates the compression quality of the image; fn As a callback method, it contains a parameter of a Blob object; the code is as follows:
|
1
2
3
4
5
|
function
canvasResizetoFile(canvas,quality,fn){
canvas.toBlob(
function
(blob) {
fn(blob);
},
'image/jpeg'
,quality);
};
|
The Blob object here represents immutable raw data like file objects. Blob represents data that is not necessarily in the native form of JavaScript. The File interface is based on Blob, inherits the function of Blob and extends it to support files on the user's system. We can treat it as a File type, other more specific usage can refer to the MDN document.
4. CanvasResizetoDataURL(canvas,quality) compresses a Canvas object into a dataURL string, in which the canvas parameter is passed in a Canvas object; the quality parameter is passed in a 0-1 number type, which indicates the compression quality of the image; the code is as follows:
|
1
2
3
|
methods.canvasResizetoDataURL =
function
(canvas,quality){
return
canvas.toDataURL(
'image/jpeg'
,quality);
};
|
5. filetoDataURL(file,fn) will convert a File (Blob) type file into a dataURL string, where the file parameter is passed in a File (Blob) type file; fn is the callback method, including a dataURL string parameter; the code is as follows :
|
1
2
3
4
5
6
7
|
function
filetoDataURL(file,fn){
var
reader =
new
FileReader();
reader.onloadend =
function
(e){
fn(e.target.result);
};
reader.readAsDataURL(file);
};
|
6. dataURLtoImage(dataurl,fn) will convert a string of dataURL strings into Image type files, where the dataurl parameter is passed in a dataURL string, and fn is the callback method, including the parameters of an Image type file. The code is as follows:
|
1
2
3
4
5
6
7
|
function
dataURLtoImage(dataurl,fn){
var
img =
new
Image();
img.onload =
function
() {
fn(img);
};
img.src = dataurl;
};
|
7. dataURLtoFile(dataurl) will convert a string of dataURL strings into Blob type objects, where the dataurl parameter is passed in a dataURL string, the code is as follows:
|
1
2
3
4
5
6
7
8
|
function
dataURLtoFile(dataurl) {
var
arr = dataurl.split(
','
), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr =
new
Uint8Array(n);
while
(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return
new
Blob([u8arr], {type:mime});
};
|
The above 7 conversions can basically cover all types of conversions, let's look at the method of JS proportional compression image:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
function
proDownImage(path,imgObj) {
// 等比压缩图片工具
//var proMaxHeight = 185;
var
proMaxHeight=300;
var
proMaxWidth = 175;
var
size =
new
Object();
var
image =
new
Image();
image.src = path;
image.attachEvent(
"onreadystatechange"
,
function
() {
// 当加载状态改变时执行此方法,因为img的加载有延迟
if
(image.readyState ==
"complete"
) {
// 当加载状态为完全结束时进入
if
(image.width > 0 && image.height > 0) {
var
ww = proMaxWidth / image.width;
var
hh = proMaxHeight / image.height;
var
rate = (ww < hh) ? ww: hh;
if
(rate <= 1) {
alert(
"imgage width*rate is:"
+ image.width * rate);
size.width = image.width * rate;
size.height = image.height * rate;
}
else
{
alert(
"imgage width is:"
+ image.width);
size.width = image.width;
size.height = image.height;
}
}
}
imgObj.attr(
"width"
,size.width);
imgObj.attr(
"height"
,size.height);
});
}
|
参考：
https://blog.csdn.net/twtcqw2008/article/details/80766914