最近、プロジェクトに取り組んでいるときに写真コラージュ機能に出会ったので、ここでカプセル化されたキャンバス コラージュ機能を共有します。質問がある場合、またはより良い方法がある場合は、プライベートでチャットしてください。またはコメントでご指摘いただきました、ありがとうございます
実装のアイデアは実際には非常に単純で、主にサーバーを通じて画像のリンク、画像の幅、画像の高さを取得し、単純な再帰を使用してそれを実装する必要があります (モバイル端末は 2 の比率を使用する必要があることに注意してください)。そうしないと画像がぼやけてしまいます）
/** * キャンバス描画データ * @param {Object[]} option.photoData * @param {string} option.photoData[].photo - 写真のリンク アドレス * @param {number} option.photoData[]。 width - 写真の幅* @param {number} option.photoData[].height - 写真の高さ* @param {Object[]} option.wordData * @param {string} option.wordData[].color - カラーテキストの* @param {number} option.wordData[].fontSize - テキストのサイズ* @param {string} option.wordData[].fontWeight - テキストの太さ* @param {number} option.wordData[].left - テキストの左側 Distance* @param {number} option.wordData[].top - テキストの上マージン* @param {string} option.wordData[].word - テキストの内容* @param {物体[]} option.iconData * @param {string} option.iconData[].photo - アイコンのリンクアドレス * @param {number} option.iconData[].left - アイコンの左マージン * @param {number} オプション.iconData[] .top - アイコンの上マージン * @param {数値} option.iconData[].width - アイコンの幅 * @param {数値} option.iconData[].height - アイコンの高さアイコン * */機能CanvasDraw(option){ var Canvas = document.createElement('canvas'), ctx = Canvas.getContext('2d'), clientWidth = document.documentElement.clientWidth, CanvasHeight = 0, distance = 0, photoCount = 0, iconCount = 0; // 携帯電話でキャンバスに二重描画するとぼやけるので二重描画が必要ですが、PC側では不要です。 clientWidth = clientWidth > 480 * 2 : clientWidth * 2; option.photoData.forEach(function(item,index,picArr){ if (!index) { item. distance = 0; }else if(index){ 距離 + = Math.floor(clientWidth / option.photoData[index - 1].width * option.photoData[index - 1].height) item. distance = 距離; } CanvasHeight += Math.floor(clientWidth / item.width * item.height); item.imgHeight = Math.floor(clientWidth / item.width * item.height); option.photoData) if (ctx) { Canvas.width = clientWidth; Canvas.height = CanvasHeight + clientWidth / 4 * 2 ctx.fillStyle = '#fff' ctx.fillRect(0, 0, Canvas.width, Canvas.height) // 画像テキストを描画 if(option.wordData.length){ option.wordData.forEach(function(item,index) { ctx.fillStyle = item.color = '通常の通常' + item.fontWeight + ' ' +計算(item.fontSize) + 'px YaHei'; ctx.textAlign = 'left'; ctx.fillText(item.word, Calculate(item.left), CanvasHeight + Calculate(item.top)); // さまざまな携帯電話の間隔関数を計算します。比例計算(num){ return Math.floor(clientWidth * num / 750) }drawPhoto('photo0') functiondrawPhoto(photoDom){ var photoDom = new Image(); photoDom.setAttribute('crossOrigin', 'Anonymous'); photoDom.src = option.photoData[photoCount].photo; photoDom.onload = function(){ ctx.drawImage(photoDom, 0, option.photoData[写真カウント].距離、クライアント幅、オプション.写真データ[写真カウント].imgHeight); (写真カウント ==) option.photoData.length) {drawIcon('icon0') functiondrawIcon(iconDom){ var iconDom = new Image(); iconDom.setAttribute('crossOrigin', 'Anonymous'); iconDom.src = option.iconData[iconCount] .icon; iconDom.onload = function(){ ctx.drawImage(iconDom, Calculate(option.iconData[iconCount].left)、canvasHeight + Calculate(option.iconData[iconCount].top)、calculate(option.iconData[iconCount].width)、calculate(option.iconData[iconCount].height)) iconCount++; if (iconCount == option.iconData.length) { var imageURL = Canvas.toDataURL(image/jpeg) document.getElementsByClassName('shareImg')[0].setAttribute('src', imageURL) //クロージャ参照をクリアし、メモリを解放します。 }else{drawIcon('icon' + iconCount) } } } } else{drawPhoto('photo'+photoCount) } } } }else{ console.log('キャンバスはサポートされていません') } }以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。