如何使用Javascript画布调整图像大小
我正在尝试使用javascript调整图像大小 首先，我把图像放在画布上，这样我就可以操纵它了 我可以把它变小，但问题是我不能用尺度变换把它变大。为了方便起见，我将在这里插入代码如何使用Javascript画布调整图像大小,javascript,html,image,canvas,image-resizing,Javascript,Html,Image,Canvas,Image Resizing,我正在尝试使用javascript调整图像大小 首先，我把图像放在画布上，这样我就可以操纵它了 我可以把它变小，但问题是我不能用尺度变换把它变大。为了方便起见，我将在这里插入代码 <!DOCTYPE HTML> <html> <body> <canvas id='canvas1'></canvas> <hr> <button id='read'>READ IMAGE</button&
<!DOCTYPE HTML>
<html>
<body>
<canvas id='canvas1'></canvas>
<hr>
<button id='read'>READ IMAGE</button>
<hr>
Scale <input type='range' value='1' min='0.25' max='2' step='0.25' id='scale'>
<br><button id='default2'>Default Scalling</button>
<hr/>
</body>
<script src='imagine.js'></script>
<script>
var canvas = document.getElementById('canvas1')
var obj = new pc(canvas)
obj.image2canvas("565043_553561101348179_1714194038_a.jpg")
var tes = new Array()
document.getElementById('read').addEventListener('click',function(){
tes = obj.image2read()
})
document.getElementById('scale').addEventListener('change',function(){
var scaleval = this.value
var xpos = 0
var ypos = 0
var xnow = 0
var ynow = 0
var objW = obj.width
var objH = obj.height
tesbackup = new Array()
for(var c=0; c<tes.length; c++){
temp = new Array()
for(var d=0; d<4; d++){
temp.push(255)
}
tesbackup.push(temp)
}
for(var i=0; i<tes.length; i++){
xpos = obj.i2x(i)
ypos = obj.i2y(i)
xnow = Math.round( (xpos)*(scaleval))
ynow = Math.round( (ypos)*(scaleval))
var idxnow = obj.xy2i(xnow,ynow)
tesbackup[idxnow][0] = tes[i][0]
tesbackup[idxnow][1] = tes[i][1]
tesbackup[idxnow][2] = tes[i][2]
}
obj.array2canvas(tesbackup)
})
</script>
读取图像
规模
默认缩放
var canvas=document.getElementById（'canvas1'）
var obj=新电脑（画布）
obj.image2canvas（“565043_553561101348179_1714194038_a.jpg”）
var tes=新数组（）
document.getElementById（'read'）.addEventListener（'click'，function（）{
tes=obj.image2read（）
})
document.getElementById（'scale'）。addEventListener（'change'，function（）{
var scaleval=this.value
var xpos=0
var ypos=0
var xnow=0
var ynow=0
var objW=obj.width
var objH=obj高度
tesbackup=新阵列（）
对于（var c=0；cf第一步是删除这一行：错误（“array2canvas未能执行”）您介意我从头开始为您创建一个吗？如果您为（var i=0；iI可以立即调整画布的大小，但之后图像将消失错误仍然相同，无法设置未定义的属性“0”。我的循环是否有问题？请提前感谢
function info(text){
console.info(text)
}
function pc(canvas){
this.canvas = canvas
this.context = this.canvas.getContext('2d')
this.width = 0
this.height = 0
this.imgsrc = ""
this.image2read = function(){
this.originalLakeImageData = this.context.getImageData(0,0, this.width, this.height)
this.resultArr = new Array()
this.tempArr = new Array()
this.tempCount = 0
for(var i=0; i<this.originalLakeImageData.data.length; i++){
this.tempCount++
this.tempArr.push(this.originalLakeImageData.data[i])
if(this.tempCount == 4){
this.resultArr.push(this.tempArr)
this.tempArr = []
this.tempCount = 0
}
}
info('image2read Success ('+this.imgsrc+') : '+this.width+'x'+this.height)
return this.resultArr
}
this.image2canvas = function(imgsrc){
var imageObj = new Image()
var parent = this
imageObj.onload = function() {
parent.canvas.width = imageObj.width
parent.canvas.height = imageObj.height
parent.context.drawImage(imageObj, 0, 0)
parent.width = imageObj.width
parent.height = imageObj.height
info('image2canvas Success ('+imgsrc+')')
}
imageObj.src = imgsrc
this.imgsrc = imgsrc
}
this.array2canvas = function(arr){
this.imageData = this.context.getImageData(0,0, this.width, this.height)
if(this.imageData.data.length != arr.length*4){
error("array2canvas Failed to Execute")
return false
}
for(var i = 0; i < arr.length; i++){
this.imageData.data[(i*4)] = arr[i][0]
this.imageData.data[(i*4)+1] = arr[i][1]
this.imageData.data[(i*4)+2] = arr[i][2]
this.imageData.data[(i*4)+3] = arr[i][3]
}
this.context.clearRect(0, 0, this.width, this.height)
this.context.putImageData(this.imageData, 0, 0)
info('Array2Canvas Success ('+this.imgsrc+')')
}
this.i2x = function(i){
return (i % this.width)
}
this.i2y = function(i){
return ((i - (i % this.width))/ this.width)
}
this.xy2i = function(x,y){
return (y * this.width) + (x)
}
}