js上傳圖片並取色代碼,js圖片上傳方法

本文目錄一覽：

• 1、圖片上傳前用JS代碼進行預覽並編輯裁剪區域
• 2、js如何做一個取色器
• 3、js從10種顏色中隨機取色實現每次取出不同的顏色

圖片上傳前用JS代碼進行預覽並編輯裁剪區域

的圖片上傳功能後可以實現區域截圖,也可以實現放大縮小…估計是用了JS來實現的:

var div_move = 0;

var IE = document.all?true:false;

var tempX,tempY,oldX,oldY;

var have_move = 0;

function grasp()

{

div_move = 1;

if(IE)

{

document.getElementById(“source_div”).setCapture();

}

}

function free()

{

div_move = 0;

have_move = 0;

document.getElementById(“source_div”).releaseCapture();

}

function getMouseXY(e)

{

if (IE)

{ // grab the x-y pos.s if browser is IE

tempX = event.clientX + document.body.scrollLeft

tempY = event.clientY + document.body.scrollTop

}

else

{

// grab the x-y pos.s if browser is NS

tempX = e.pageX

tempY = e.pageY

}

// catch possible negative values in NS4

if (tempX 0){tempX = 0}

if (tempY 0){tempY = 0}

}

function move_it(e)

{

getMouseXY(e);

if(div_move == 1)

{

if(have_move == 0)

{

//alert(‘a’);

oldX = tempX;

oldY = tempY;

have_move = 1;

}

var left = parseInt(document.getElementById(“source_div”).style.left);

var top = parseInt(document.getElementById(“source_div”).style.top);

//alert(top);

//alert(left);

//alert(tempX);

//alert(oldX);

document.getElementById(“source_div”).style.left = left + tempX – oldX;

document.getElementById(“source_div”).style.top = top + tempY – oldY;

oldX = tempX;

oldY = tempY;

}

}

function change_size(method)

{

if(method == 1)

{

var per = 1.25;

}

else

{

var per = 0.8;

}

document.getElementById(“show_img”).width = document.getElementById(“show_img”).width*per;

//document.getElementById(“show_img”).height = document.getElementById(“show_img”).height*per;

}

function micro_move(method)

{

switch (method)

{

case “up”:

var top = parseInt(document.getElementById(“source_div”).style.top);

document.getElementById(“source_div”).style.top = top – 5;

break;

case “down”:

var top = parseInt(document.getElementById(“source_div”).style.top);

document.getElementById(“source_div”).style.top = top + 5;

break;

case “left”:

var left = parseInt(document.getElementById(“source_div”).style.left);

document.getElementById(“source_div”).style.left = left – 5;

break;

case “right”:

var left = parseInt(document.getElementById(“source_div”).style.left);

document.getElementById(“source_div”).style.left = left + 5;

break;

}

}

function turn(method)

{

var i=document.getElementById(‘show_img’).style.filter.match(/\d/)[0]

//alert(i);

i=parseInt(i)+parseInt(method);

//alert(i);

if(i0)

{

i += 4;

}

if(i=4)

{

i -= 4;

}

//alert(i);

document.getElementById(‘show_img’).style.filter=’progid:DXImageTransform.Microsoft.BasicImage(Rotation=’+i+’)’

}

function mysub()

{

var Oform = document.myform;

Oform.go.value = 1;

Oform.width.value = document.getElementById(“show_img”).width;

Oform.left.value = document.getElementById(“source_div”).style.left;

Oform.top.value = document.getElementById(“source_div”).style.top;

if(IE)

{

Oform.turn.value = document.getElementById(‘show_img’).style.filter.match(/\d/)[0];

}

Oform.submit();

}

蘋果樹下也有類似功能不過,功能要比你所說的強大的多…

資料搜集於百度知道！

js如何做一個取色器

一般的項目可以直接使用開源的插件。

如果要自己做，就要根據需求，把顏色列表數據存儲起來。在頁面當中顯示可以列出的顏色，當鼠標按住移動的時候，根據當前的坐標移動數值，移動滑塊。根據滑塊的位置確定當前選取的是哪個顏色的值。

js從10種顏色中隨機取色實現每次取出不同的顏色

昨天在做js

從10種顏色中隨機取色，並每次取出的顏色不同的時候，考慮了很多，最終用如下來實現：

複製代碼

代碼如下:

var

colorList

=

[“#FFFF99″,”#B5FF91″,”#94DBFF”,”#FFBAFF”,”#FFBD9D”,”#C7A3ED”,”#CC9898″,”#8AC007″,”#CCC007″,”#FFAD5C”];

for(var

i=0;ilineList.length;i++){

var

bgColor

=

getColorByRandom(colorList);

}

function

getColorByRandom(colorList){

var

colorIndex

=

Math.floor(Math.random()*colorList.length);

var

color

=

colorList[colorIndex];

colorList.splice(colorIndex,1);

return

color;

}

這樣便能每次取出的顏色是隨機的且都不一樣