Canvas——滑桿操控圖片放大縮小
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body style="background: black;">
<canvas id="canvas" style="display:block;margin:0 auto;border:1px solid #aaa;">
您的瀏覽器尚不支援canvas
</canvas>
<input type="range" id="scale-range" min="0.5" max="3.0" step="0.01" value="1.0" style="display:block;margin:20px auto;width:800px"/>
<script>
var canvas = document.getElementById("canvas")
var context = canvas.getContext("2d")
var slider = document.getElementById("scale-range")
var image = new Image()
window.onload = function(){
canvas.width = 1152
canvas.height = 768
var scale = slider.value
image.src = "img-lg.jpg"
image.onload = function(){
drawImageByScale( scale )
// slider.onchange = function(){
// scale = slider.value
// drawImage( image , scale )
// }
slider.onmousemove = function(){
scale = slider.value
drawImageByScale( scale )
}
}
}
function drawImageByScale( scale ){
var imageWidth = 1152 * scale
var imageHeight = 768 * scale
//var sx = imageWidth / 2 - canvas.width / 2
//var sy = imageHeight / 2 - canvas.height / 2
//context.drawImage( image , sx , sy , canvas.width , canvas.height , 0 , 0 , canvas.width , canvas.height )
x = canvas.width /2 - imageWidth / 2
y = canvas.height / 2 - imageHeight / 2
context.clearRect( 0 , 0 , canvas.width , canvas.height )
context.drawImage( image , x , y , imageWidth , imageHeight )
}
</script>
</body>
</html>
相關文章
- ??圖片壓縮CanvasCanvas
- canvas 壓縮圖片Canvas
- axure教程|axure之圖片拖動放大縮小
- 【canvas】搖桿操控飛船的動畫原理Canvas動畫
- 利用 canvas 實現圖片壓縮Canvas
- 視訊直播app原始碼,點選圖片放大再點選縮小APP原始碼
- 移動端上傳圖片進行平移放大縮小操作後生成海報
- 純前端實現 JPG 圖片壓縮 | canvas前端Canvas
- js 滾輪控制圖片縮放大小和拖動JS
- 小程式canvas居中剪裁繪製圖片Canvas
- 圖片縮小尺寸演算法演算法
- html canvas 圖片壓縮後 透明背景變成黑色HTMLCanvas
- 視覺化學習:實現Canvas圖片區域性放大鏡視覺化Canvas
- ps放大縮小快捷鍵是什麼 ps裡面放大縮小怎麼操作
- flutter實現可縮放可拖拽雙擊放大的圖片功能Flutter
- JavaScript 圖片放大鏡效果JavaScript
- iOS 仿淘寶實現商品規格圖片的放大縮小功能iOS
- AI影像放大工具,圖片放大無所不能AI
- 谷歌瀏覽器頁面放大縮小谷歌瀏覽器
- Vue-CLI and Leaflet(2):地圖基本操作(放大,縮小,平移,定位等)Vue地圖
- 小程式利用Canvas繪製圖片和豎排文字Canvas
- Android-壓縮大圖到容量超小的圖片Android
- 滑塊驗證圖片
- 基於canvas生成圖片Canvas
- canvas效能-drawImage渲染圖片Canvas
- canvas-修改圖片亮度Canvas
- 讓 Vuepress 支援圖片放大功能Vue
- CSS3圖片拉近放大效果CSSS3
- 後臺展示圖片點選放大
- 前端圖片壓縮 - H5&Uni-App圖片壓縮前端H5APP
- 圖片壓縮20201109
- iOS實現點選圖片放大&長按儲存圖片iOS
- win10怎麼批量把圖片縮小_win10批量壓縮圖片大小的方法Win10
- win10怎麼批次把圖片縮小_win10批次壓縮圖片大小的方法Win10
- 小視訊原始碼,java使用Thumbnails壓縮圖片原始碼JavaAI
- Canvas 縮放圖片中細節消失Canvas
- Windows設定圖片縮圖Windows
- 開源圖片工具箱(Img Toolbox) 格式轉換 新增水印 圖片壓縮 圖片裁剪 圖片旋轉 圖片縮放
- 微信小程式--通過canvas生成圖片並儲存到本地微信小程式Canvas