Geralmente, ao processar o upload da imagem, a lógica usual é fazer o upload da imagem de origem no lado do servidor e, em seguida, a linguagem lateral do servidor executa a operação de escala.
Esse modo geralmente pode atender à maioria das necessidades, mas quando a imagem de que precisamos é apenas uma miniatura da imagem de origem de um tamanho especificado, usando esse modo será uma maneira de desperdiçar recursos do servidor e largura de banda. Portanto, consideramos gerar imagens pequenas no navegador e depois enviá -las.
// o seguinte é o código -fonte
A cópia do código é a seguinte:
função drawcanvasimage (obj, largura, retorno de chamada) {
var $ canvas = $ ('<VAS> </canvas>'),
tela = $ canvas [0],
context = canvas.getContext ('2d');
var iMg = new Image ();
img.onload = function () {
if (largura) {
if (largura> img.width) {
var Target_w = img.width;
var Target_h = img.Height;
}outro{
var Target_W = Largura;
var Target_h = parseint (Target_W/img.width*img.Height);
}
}outro{
var Target_w = img.width;
var Target_h = img.Height;
}
$ canvas [0] .Width = Target_W;
$ canvas [0] .Height = Target_H;
context.Drawimage (IMG, 0,0, Target_W, Target_H);
_Canvas = Canvas.todataurl ();
/*console.log(_Canvas) ;*/
retorno de chamada (obj, _canvas);
}
img.src = getfullpath (obj);
}
função getfullpath (obj)
{
If (OBJ)
{
// ou seja
if (window.navigator.useragent.indexOf ("msie")> = 1)
{
obj.select ();
retornar document.selection.createrange (). text;
}
// Firefox
caso contrário, if (window.navigator.UserAgent.Indexof ("Firefox")> = 1 || $ .Browser.OPERA || $ .Browser.Mozilla)
{
if (obj.files && window.url.createbjecturl)
{
retornar window.url.createObjecturl (obj.files [0]);
}
retornar obj.value;
} else if ($. Browser.safari) {
if (window.webkiturl.createObjecturl && obj.files) {
retornar window.webkiturl.createObjecturl (obj.files [0]);
}
retornar obj.value;
}
retornar obj.value;
}
}
A função GetfullPath é obter o endereço da imagem selecionada.
_Canvas obtém a codificação de imagem codificada por Base64 e basta transferir para o back-end para gravar para o arquivo.