アクティビティ ページを作成する場合、多くの場合、写真をアップロードする必要があり、写真、生成されたテキスト、ステッカーを、ユーザーが長押しして保存できるカードに生成する必要もあります。この要件は以前に一度満たされており、最近再びすべて Canvas を使用して実装されました。ブログにまとめるだけです。より良い実装方法があれば、ぜひ一緒に議論してください。
キャンバスを使用して画像を圧縮するHTML で write input タグを使用し、タイプがファイルの場合、携帯電話のフォト アルバムを呼び出して写真を選択でき、カメラによる写真撮影もサポートできます。このシナリオでは、画像のサイズが大きくなり、バックエンドでサポートされる最大範囲を超える可能性があるため、アップロードが失敗します。
<入力ID=ファイルタイプ=ファイル>
1.まず画像ファイルを取得します
var eleFile = document.querySelector('#file'); var Reader = new FileReader() eleFile.addEventListener('change', function (event) { file =event.target.files[0]; console.log(file) // 選択されたファイルは画像です if (file.type.indexOf(image) == 0) { Reader.readAsDataURL(file) } });2. 画像ファイルを取得したので、js での FileReader オブジェクトの使用法を理解する必要があります。
FileReader オブジェクトを使用すると、Web アプリケーションはユーザーのコンピュータに保存されているファイル (または生データ バッファ) の内容を非同期的に読み取ることができます。
方法：
| メソッド名 | パラメータ | 説明する |
|---|---|---|
| アボート | なし | 読み取りを中断する |
| readAsBinaryString | ファイル | バイナリコード |
| readAsDataURL | ファイル | ファイルをDataURLとして読み取る |
| テキストとして読む | ファイル、[エンコーディング] | ファイルをテキストとして読み取る |
| イベント | 説明する |
|---|---|
| 中止します | 割り込みでトリガーされる |
| エラー時 | 中止します |
| オンロード | ファイルの読み取りが正常に完了するとトリガーされます |
| オンロードエンド | 成功または失敗に関係なく、読み取り完了によってトリガーされます |
| onloadstart | 読み取り開始時に発火します |
| 進行中 | 読む |
画像を取得した後、上記の操作を続行します。この時点でファイルを処理して変換する必要があります。
var Reader = new FileReader(); //データ URL の形式でファイルをページに読み込みます Reader.onload=function(e) { console.log(reader) }画像が取得されて変換されたので、圧縮できるようになります。
var eleFile = document.querySelector('#file'); var Reader = new FileReader() eleFile.addEventListener('change', function (event) { file =event.target.files[0]; // console.log( file) // 選択されたファイルは画像です if (file.type.indexOf(image) == 0) { var Reader = new FileReader(); // ファイルをデータに変換しますURL の形式でページを読み取ります。 Reader.readAsDataURL(file); Reader.onload=function(e) { // console.log(this.result) var pre=document.getElementById(pre); this.result ) CanvasDataURL(this.result, 100, 0.5) } } }) /* [キャンバスによって圧縮されたcanvasDataURL] * @params path 画像のbase64形式* @params targetWidth 圧縮画像の幅* @paramsquality 画質の値が小さいほど描画画像がぼやけます*/ function CanvasDataURL(path, targetWidth,quality) { var img = new Image(); img.src = path img.onload = function () { // var that = this // console.log(that) // デフォルトの比例圧縮 var w = this.width var h = this.heightscale = w / h; w = targetWidth h = targetWidth /scale varquality =quality; // キャンバスを生成します var Canvas = document.createElement('canvas'); ctx = Canvas.getContext('2d'); // 属性ノードを作成します。 var anw = document.createAttribute(width); document.createAttribute(height); anh.nodeValue = h; Canvas.setAttributeNode(anh); ctx.drawImage(this, 0, 0, w, h);描画された画像がぼやけるほど良いresult=document.getElementById(result); result.setAttribute(src,base64) } }非常に簡単なので、圧縮画像を取得できます。原理は、canvas の toDataURL メソッドで圧縮画像の形式と圧縮品質を指定し、canvas 情報を圧縮して変換することができます。 Base64 圧縮に変換します。
キャンバスを使ってカードを作るシーン: 圧縮したばかりの画像を別の画像と結合し、長押しして保存します。
functiondrawCanvas (target) { var Canvas = document.querySelector('#myCanvas') var ctx = Canvas.getContext('2d') // デバイス上の物理ピクセルとデバイスに依存しないピクセル (ディップ) Ratio var dp = window.devicePixelRatio || 1 var backingStoreRatio = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.oBackingStorePixelRatio || 1 var 比率 = this.dp / this.backingStoreRatio var oldHeight = Canvas.height Canvas.width = oldWidth * 比率 Canvas.height = oldHeight * 比率 Canvas.style.width = oldWidth + 'px' Canvas.style.height = oldHeight + 'px' ctx.scale(ratio, rate) var headerImg = new Image() var bgImg = new Image() headerImg.src = ターゲット bgImg.src = '../bg.png' headerImg.onload = (e) => { // 画像のアスペクト比 var rate = headerImg.width / headerImg.height console.log(rate) bgImg.onload = (e) => { ctx.drawImage(headerImg, 10, 30, 50, (50 / rate) )) // 背景画像 ctx.drawImage(bgImg, 0, 0, 150, 150) ctx.fillText('Awesome', 80, 70) var resultImg = new Image() resultImg.src = Canvas.toDataURL('image/png', 1) resultImg.style.width = '100%' var CardImg=document 。 getElementById(cardImg);cardImg.setAttribute(src, resultImg.src) } }先ほど取得した画像を取得し、画像を読み込んだ後、キャンバス上に描画します。テキストなどを追加することもできます。最後にキャンバスの情報をbase64エンコーディングに変換して実装します。コードを通じて例を実践できる
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。