Как я могу обрезать изображение с помощью холста HTML5 и JavaScript, чтобы обрезать изображение в автономном режиме?

В Интернете есть несколько инструментов для обрезки изображения с использованием JavaScript и PHP, но, к сожалению, если мы намерены строго придерживаться нашего приложения, то нет сценариев на стороне сервера, на которые мы можем положиться, поэтому для достижения этого мы должны использовать холст HTML5 и JavaScript, чтобы обрезать изображение в автономном режиме.Как я могу обрезать изображение с помощью холста HTML5 и JavaScript, чтобы обрезать изображение в автономном режиме?

источник

2013-06-01 prasadmunna12

Если изображение возникло из локального домена, вы можете легко обрезать его холстом html.

Но, если образ возник из другого домена, вы столкнетесь с ошибками безопасности CORS: http://code.google.com/p/html5security/wiki/CrossOriginRequestSecurity

При необходимости, вы можете также масштабировать вверх/вниз, как вы кадрирование.

Вот пример кода использовать холст drawImage обрезать изображение:

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 

<style> 
    body{ background-color: ivory; } 
    canvas{border:1px solid red;} 
</style> 

<script> 
$(function(){ 

    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 

    var img=new Image(); 
    img.onload=function(){ 
     crop(); 
    } 
    img.src=document.getElementById("source").src; 

    function crop(){ 
     // this takes a 105x105px crop from img at x=149/y=4 
     // and copies that crop to the canvas 
     ctx.drawImage(img,149,4,105,105,0,0,105,105); 
     // this uses the canvas as the src for the cropped img element 
     document.getElementById("cropped").src=canvas.toDataURL(); 
    } 

}); // end $(function(){}); 
</script> 

</head> 

<body> 
    <img id="source" width=400 height=234 src="localImage.png"> 
    <img id="cropped" width=105 height=105> 
    <canvas id="canvas" width=105 height=105></canvas> 
</body> 
</html>

источник

2013-06-01 07:25:49 markE

Вы можете написать 'img.onload = урожай;', а не функцию инлайн. – rvighne

Как я могу обрезать изображение с помощью холста HTML5 и JavaScript, чтобы обрезать изображение в автономном режиме?

ответ

Смежные вопросы