用vue制作html页面展示图像。 前几天，在网上看到了在Html页面上展示图像的例子。 正好最近在看vue框架，这个灵感受到了很大的启发。 因此，制作了html页面的展示图像的例子。
具体原理是这样的，首先用canvas在画布上绘制和展示图像，再用getImageData获取图像数据。 得到该数据后，以d*d个方格内的像素为平均值，给出1个div的背景色。 用一系列div组成的矩阵表示这个图像。
下图显示了在第一步中定义vue的子组件，在该子组件中运行所有程序，然后在根组件模板中装载子组件。
导入来自' vue from ' vue '
importpanelfrom './components/child component.vue '
let my=new Vue({ ((
El : ' # APP '，
模板： `
`，
components: {
面板：面板
}
)；
这是主门户文件，而Panel是其子组件。
在子组件childcomponent中，用钩子函数mounted取得图像数据信息，将计算出的图像数据d*d领域的像素平均值保存在一个排列中。 pixelsNum是采样图像的区域的宽度和高度，这是我们设定的值。 将此mypixels作为子组件output的属性传递给output。 在output中根据该数据制作html的图像
在childcomponent中
mounted () }
//加载图片并绘制在canvas上
varc=document.getelementsbytagname (' canvas ' ) [0]；
var data
varCTX=c.getcontext('2d ' ) )。
var img=new Image (
img.src=require (' ./assets/13.jpg )；
img.() nl ) ad=) )={
CTX.drawimage(img，0，0 )；
//加载图像后，可以获得每个像素的色值rgb
//获取图像的像素和每个样本的大小
var w=c.width，h=c.height，pixelsNum=this.pixelsNum；
for(vary=0； y
for(varx=0； x
{
data=CTX.getimage data (x * pixelsNum，y*pixelsNum，pixelsNum，pixels num ).data
for(varI=0； I
{
this.pixels.push ({ r : data [ I ]、g:data[i 1]和b:data[i 2]} )
}
data=空；
//console.log ('初始采样数组'，this.pixels ) )。
求出//d*d区域的像素平均值，记入数组this.mypixels
var sumr=0，sumg=0，sumb=0
for(varI=0； I
{
sumb=this.pixels[i].b；
sumg=this.pixels[i].g；
sumr=this.pixels[i].r；
}
this.pixels=[]；
this.mypixels.push({ ((
r : math.round (sumr/pixels num/pixels num )，
g : math.round (sumg/pixels num/pixels num )，
b : math.round (sumb/pixels num/pixels num ) )。
() )
}
}
(，
在childcomponent的模板中，使output的各行的div数与原始图像的各行的采样数一致。 将output的宽度定义为每个div的宽度*样本数，避免了与各行各列数据对应的图像偏移。
在Output中
class='output '
在组件output的methods中定义方法myrgb，将数组内的数据按照index连接成css颜色字符串形式' RGB(a，b，c ) '
methods:{
myRGB(I ) {
return'RGB(this.Pixels[I].r '，'
this.pixels[i].g '，'
this.pixels[i].b ' ) '；
}
最后的效果图如下