</h1>
<div class="clear"></div>
<div class="postBody">
最初の写真：
上の画像は、jsのほぼすべての画像タイプの変換方法です。次に、一般的に使用されるいくつかの型変換について説明します。
1. urltoImage（url、fn）は、必要な画像オブジェクトをurlを介してロードします。ここで、urlパラメーターは画像のurlで渡されます。fnは、Imageオブジェクトのパラメーターを含むコールバックメソッドであり、コードは次のとおりです。 ：
|
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）は、ImageオブジェクトをCanvasタイプのオブジェクトに変換します。ここで、imageパラメーターはImageオブジェクトに渡され、コードは次のとおりです。
|
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）は、CanvasオブジェクトをBlobタイプのオブジェクトに圧縮します。canvasパラメーターはCanvasオブジェクトに渡されます。qualityパラメーターは、の圧縮品質を示す0-1の数値型に渡されます。 image; fnコールバックメソッドとして、Blobオブジェクトのパラメーターが含まれています。コードは次のとおりです。
|
1
2
3
4
5
|
function
canvasResizetoFile(canvas,quality,fn){
canvas.toBlob(
function
(blob) {
fn(blob);
},
'image/jpeg'
,quality);
};
|
ここでのBlobオブジェクトは、ファイルオブジェクトのような不変の生データを表します。Blobは、必ずしもJavaScriptのネイティブ形式であるとは限らないデータを表します。ファイルインターフェイスはBlobに基づいており、Blobの機能を継承し、ユーザーのシステム上のファイルをサポートするように拡張します。これをファイルタイプとして扱うことができます。他のより具体的な使用法では、MDNドキュメントを参照できます。
4. canvasResizetoDataURL（canvas、quality）は、CanvasオブジェクトをdataURL文字列に圧縮します。ここで、canvasパラメータはCanvasオブジェクトに渡されます。qualityパラメータは、画像の圧縮品質を示す0-1の数値タイプで渡されます。 ;コードは次のとおりです。
|
1
2
3
|
methods.canvasResizetoDataURL =
function
(canvas,quality){
return
canvas.toDataURL(
'image/jpeg'
,quality);
};
|
5. filetoDataURL（file、fn）は、ファイル（Blob）タイプのファイルをdataURL文字列に変換します。ここで、ファイルパラメーターはファイル（Blob）タイプのファイルで渡されます。fnは、dataURL文字列パラメーターを含むコールバックメソッドです。コードは次のとおりです。
|
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）は、dataURL文字列の文字列を画像タイプのファイルに変換します。dataurlパラメータはdataURL文字列で渡され、fnは画像タイプファイルのパラメータを含むコールバックメソッドです。コードは次のとおりです。次のように：
|
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）は、dataURL文字列の文字列をBlobタイプのオブジェクトに変換します。ここで、dataurlパラメータはdataURL文字列で渡され、コードは次のとおりです。
|
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});
};
|
上記の7つの変換は、基本的にすべてのタイプの変換をカバーできます。JS比例圧縮画像の方法を見てみましょう。
|
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