ナンセンスの始まり: ラベルの背景画像として使用するときに画像が引き伸ばされたり変形したりしないように、単に画像の引き伸ばし領域を設定するだけです
1.効果を実感する
左右に 2 つのラベルがあり、左側のラベルは繰り返しのない背景画像を設定します
次に、左の背景画像が変形せずに左のラベル全体をカバーするようにします。
背景画像を変形させることなく、左側のラベルが覆われていることがわかります。ただし、ここで明らかな問題があります.つまり、上の写真の中央にある「くぼんだ」部分はレイアウトの中央ではありません.はい、実際には、設定時に「繰り返される」ピクセルを繰り返すことです.写真上部のカバーです。
別の画像を試してください。
この画像の中央部分は、繰り返しの「フィラー ピクセル」として使用できます。
2. コードの実装
1、HTML
呼び出しは非常に単純です。関連するバインディングと操作のためにPictureExtension操作オブジェクトを初期化します。
// 进行背景延展操作
let pictureExtension = new PictureExtension(document.getElementById('backImageOne'),'./back1.png',(size)=>{// 需要进行拉伸的区域，因为是纵向拉伸，这里的拉伸区域的宽度为图片等宽let x = 0let y = 470let width = size.widthlet height = 20return {x,y,width,height}
})
2、JS
PictureExtensionオブジェクト管理クラスは、関連するストレッチ プロセスでのピクセルの塗りつぶし操作を実現します。
class PictureExtension{// 需要设置的背景图片的标签el// 背景图资源地址imgSrc// 图片尺寸imageSize = {}// 设置拉伸区域回调canStretchSizeCallBack = null// 设置拉伸区域canStretchSize = {}// 原像素originalPiexlsconstructor(el,imgSrc,callBack){this.el = elthis.imgSrc = imgSrcthis.canStretchSizeCallBack = callBackthis.beginImageOption()}// 开始对齐图片async beginImageOption(){await this.getImageSize(this.imgSrc)try {let piexls = this.createNewBackImage()let url = this.createURLByPiexls(piexls)this.el.style.backgroundImage = 'url('+url +')';} catch (error) {console.log('error:' + error)}}// 获取图片大小async getImageSize(imgSrc){var image = new Image();image.src = imgSrc;await new Promise((resolve)=>{image.onload = resolve})let width = image.widthlet height = image.heightthis.imageSize = { width,height }// 保存当前的自定义设置的拉伸区域if(this.canStretchSizeCallBack){this.canStretchSize = this.canStretchSizeCallBack(this.imageSize)}let canvas = document.createElement('canvas')canvas.setAttribute('width',`${width}px`)canvas.setAttribute('height',`${height}px`)var ctx = canvas.getContext("2d")ctx.fillStyle = ctx.createPattern(image, 'no-repeat');ctx.fillRect(0, 0, width, height);try {//保存像素this.originalPiexls = ctx.getImageData(0,0,width,height)} catch (error) {console.log(error)}}// 获取尺寸getAllNeedSize(){// 当前需要操作的标签实际尺寸let elWidth = this.el.offsetWidthlet elHeight = this.el.offsetHeight// 当前图片的实际尺寸let imgWidth = this.imageSize.widthlet imgHeight = this.imageSize.height// 创建新图片的尺寸,根据dom对象尺寸进行比例缩放let finallyWidth = imgWidthlet finallyHeight = imgWidth * (elHeight / elWidth)// 需要补的像素let needFillPiexlHeight = finallyHeight - imgHeightreturn { elWidth,elHeight,imgWidth,imgHeight,finallyWidth,finallyHeight,needFillPiexlHeight }}// 生成新的图片createNewBackImage(){if(this.originalPiexls.data.length == 0){throw('像素为空')}let { finallyWidth,finallyHeight,needFillPiexlHeight } = this.getAllNeedSize()// 创建新的图片let currentIndex = 0let finallyPiexls = new Uint8ClampedArray(finallyWidth * finallyHeight * 4)for(let y = 0;y < finallyHeight;y ++){for(let x = 0;x < finallyWidth;x ++){for(let k = 0;k < 4;k++){let indexif(y <= this.canStretchSize.y) {// 开头直接对接index = (y * finallyWidth + x) * 4 + k} else if( y > this.canStretchSize.y && y <= this.canStretchSize.y + needFillPiexlHeight ){// 中间重复补像素index = (((y % this.canStretchSize.height) + this.canStretchSize.y) * finallyWidth + x) * 4 + k} else {// 后面错位对齐index = ((y - needFillPiexlHeight) * finallyWidth + x) * 4 + k}finallyPiexls[currentIndex] = this.originalPiexls.data[index]currentIndex ++}}}return finallyPiexls}// 通过像素点生成URLcreateURLByPiexls(piexls){let url = ''let { finallyWidth,finallyHeight } = this.getAllNeedSize()let canvas = document.createElement('canvas')canvas.setAttribute('width',`${finallyWidth}px`)canvas.setAttribute('height',`${finallyHeight}px`)let smallCtx = canvas.getContext("2d")//初始化ImageDatalet finallyImageData = new ImageData(piexls,finallyWidth,finallyHeight)// 当前范围内需要放大的像素smallCtx.putImageData(finallyImageData,0,0,0,0,finallyWidth,finallyHeight)url = canvas.toDataURL('image/jpeg',1)if(url == ''){throw('像素转图片失败')}return url}
}
3.ロジック
以上がロジックのすべてです.最後にやりたいことは,塗りつぶしラベルのサイズが背景画像のサイズと一致しない場合に強制的に背景画像を引き伸ばすことです.その過程で,「再現可能な」引き伸ばし領域を設定します.空いた点がすべて埋まるまで、内部のピクセル値を無限にコピーします。
やっと
HTML、CSS、JavaScript、HTTP、TCPプロトコル、ブラウザ、VUE、React、データ構造とアルゴリズム、計201問のインタビュー質問集「フロントエンドメーカーインタビュー集」をまとめました。各質問に答えてください 答えて分析してください。
困っている友達、記事の最後にあるカードをクリックしてこのドキュメントを受け取り、無料で共有できます
ドキュメントの一部は次のとおりです。
記事の長さには制限があり、次のコンテンツは順次表示されません
困っている友達は、下のカードをクリックして無料で入手できます