<p>Saya mempunyai png 240x157 dan saiz div ialah 120x88</p><p>Jadi, saya membuat kanvas 240x157 dan menampal png. </p><p>Saiz div adalah lebih kecil daripada png, tetapi div mempunyai bar skrol dan saya boleh menggunakan bar seret untuk melihat keseluruhan imej. Ini adalah sempurna. </p><p><kod></kod><kod></kod></p>
<p><br /></p>
<pre class="brush:js;toolbar:false;">var ctx = $('canvas')[0].getContext('2d');
console.log("ujian")
var chara = Imej baharu();
chara.src = "https://dl.dropbox.com/s/yr8ehzbdwm0csc7/Madeira_-_Entrance_to_Town%2C_c._1900.jpg?dl=0";
chara.onload = () =>
ctx.clearRect(0, 0,240,157);
ctx.drawImage(chara,0,0,240,157);
}</pre>
<pre class="brush:css;toolbar:false;">#whole{
sempadan:1px pepejal;
lebar: 120px;
ketinggian:78px;
limpahan:scroll;
}</pre>
<pre class="brush:html;toolbar:false;"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> ;</skrip>
<div id="keseluruhan">
<canvas id="test" width="240px" height="157px"></canvas>
</div></pra>
<p><br /></p>
<p>Matlamat utama saya adalah untuk menukar skala oleh pengguna, dan apabila imej lebih besar daripada div, bar skrol akan muncul, seperti photoshop, dsb.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Anda terlupa untuk mengubah saiz kanvas dan menetapkan limpahan:auto supaya bar skrol hilang:
const canvas = $('canvas')[0]; var ctx = canvas.getContext('2d'); console.log("test") var chara = new Image(); chara.src = "https://dl.dropbox.com/s/yr8ehzbdwm0csc7/Madeira_-_Entrance_to_Town%2C_c._1900.jpg?dl=0"; $zoom.addEventListener('input', () =>{ const zoom = $zoom.value * .5; canvas.width = 240 * zoom; canvas.height = 157 * zoom; ctx.scale(zoom,zoom) // adding here. ctx.clearRect(0, 0,240,157); ctx.drawImage(chara,0,0,240,157); }); chara.onload = () => { ctx.clearRect(0, 0,240,157); ctx.drawImage(chara,0,0,240,157); }#whole{ border:1px solid; width:120px; height:78px; overflow:auto; } canvas{ margin:0; display:block; }