如何用JS改变图像的原始大小

JavaScript030

如何用JS改变图像的原始大小,第1张

用JS改变图像的原始大小方法：

var canvas = document.getElementById("canvas")

var context = canvas.getContext("2d")

$('input[type=file]').change(function(){

var file=this.files[0]

var reader=new FileReader()

var image=new Image()

reader.readAsDataURL(file)

reader.onload=function(){

// 通过 reader.result 来访问生成的 DataURL

var url=reader.result

image.src=url

alert(image.width)

alert(image.height)

image.height /=4

image.width /=4

canvas.setAttribute("width", image.width+"px")

canvas.setAttribute("height", image.height+"px")

alert(image.naturalWidth)

alert(image.naturalHeight)

context.drawImage(image,0,0,image.width,image.height)

}

})

<div class="upload-img-box" ref="moveWrap">

<div class="show-box" ref="rotate" @mousedown="moveImg" @mousewheel.prevent="rollImg($event,)">

<img :src="singleList.fileImgUrl" class="uploadimg" ref="img" :style="{transform:'scale('+multiples/100+') rotate('+rotate +'deg)'}"/>

</div>

<div class="img-plus" @click="toBIgChange()"><span class="tip">放大</span></div>

<div class="img-minus" @click="toSmallChange()"><span class="tip">缩小</span></div>

<div class="img-rotate" @click="toRotate()"><span class="tip">旋转</span></div>

</div>

在touchpad上三指(或者按住鼠标左键不松手)从左向右画一个矩形，在最右侧画板属性那里输入自己常用的画板数值，存设置设置好的画板尺寸。

sketch中touchpad工具可以设置区域和大小。

sketch是个潮流软件，比较轻量。有它的优点也有它的缺点。不过谁让我们是个做设计的呢，可以不主用，但为了时代潮流，潮流软件还是得去了解的。