js圖片編輯方法

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

http://love21cn.msn.com.cn的圖片上傳功能後可以實現區域截圖,也可以實現放大縮小...估計是用了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(i<0)
{
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或者CSS樣式來自動調整圖片大小

這個使用CSS可以控制，一般看你的圖片是哪種比例的，如果不想圖片變形的話，只設置寬或者高，如：
img{ width:50px;} 或者 img{height:50px;}
這樣的結果是，圖片本身的大小並沒有改變，但這個img標簽顯示出來的圖片是被壓縮顯示的。
利用JS來調整的原理是：獲得圖片的寬和高，然後去與父容器的寬高相比，取比例大的來父容器值對img進行樣式設置，比如：圖片寬/父容器寬 = 3， 圖片高/父容器高 = 2，那麼取父容器的寬，把這個值通過JS設置給img標簽。

❸ 用js實現圖片編輯的功能

canvas, 2d graphic, raster graphic, mouse / pointer event

❹ 如何用JS語句顯示圖片

document.write("<imgsrc='圖片地址'height=''weight=''alt=''/>");

其實很簡單，用document對象裡面的write方法。

當然你也可以弄一個按鈕，然後點擊按鈕更改圖片的屬性，代碼如下：

<buttononClick="pic.style.display='block';">點此顯示圖片</button>//按鈕點擊，圖片顯示

<imgsrc="../images/nb.jpg"border=0style="border:1px#000000solid;display:none"alt="蓋章"name="audpic">//隱藏圖片

❺ js如何在文本框後面加圖片

插入游標處的插件
* @authors Du xin li
* @update 2015-10-25
*
*********************************************/

$.fn.extend({
insertContent : function(myValue, t) {
var that = $(this);
var $t = $(this)[0];
if (document.selection) {
this.focus();
var sel = document.selection.createRange();
sel.text = myValue;
this.focus();
sel.moveStart('character', -l);
var wee = sel.text.length;
if (arguments.length == 2) {
var l = $t.value.length;
sel.moveEnd("character", wee + t);
t <= 0 ? sel.moveStart("character", wee - 2 * t - myValue.length) : sel.moveStart("character", wee - t - myValue.length);
sel.select();
}
} else if ($t.selectionStart || $t.selectionStart == '0') {
var startPos = $t.selectionStart;
var endPos = $t.selectionEnd;
var scrollTop = $t.scrollTop;
$t.value = $t.value.substring(0, startPos) + myValue + $t.value.substring(endPos,$t.value.length);
this.focus();
$t.selectionStart = startPos + myValue.length;
$t.selectionEnd = startPos + myValue.length;
$t.scrollTop = scrollTop;
if (arguments.length == 2) {
$t.setSelectionRange(startPos - t,$t.selectionEnd + t);
this.focus();
}
} else {
this.value += myValue;
this.focus();
}
}
})

使用方法：

/**
* 點擊表情按鈕插入表情方法
* @param {string} dom 任意子節點
* @param {Object} event event對象
*/
fc.emote = function(dom, event){
if (dom) {
this.setParam(dom);
} else {
return false;
}
var that = $(dom);
var e = window.event || event;
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
//顯示表情彈出層
$('.fresh-dialog-emote').removeClass('hide');
//當前文本框textarea
var _currentTextarea = this.param.form;
//點擊表情插入文本框
$('.fresh-dialog-emote').off('click', '.fresh-jsSmilies li').on('click', '.fresh-jsSmilies li', function(){
var _val = $(this).data('action');
console.log(_val)
console.log(_currentTextarea.length)
_currentTextarea.focus();
_currentTextarea.insertContent(_val);
$('.fresh-dialog-emote').addClass('hide');
})
}

// 點擊表情按鈕,彈出表情彈出層
$('.fresh-list').off('click', '.fresh-comment-emote-btn').on('click', '.fresh-comment-emote-btn', function(event){
fresh.comment.emote(this, event

❻ 我想在js頁面獲取jsp頁面的一個div並在js里調用方法給它添加圖片,用什麼方法

給div設置background唄
不然往子節點append一個img

❼ 如何用JS實現簡單的圖片替換

用正則匹配<img />標簽裡面的src的內容, 找到後進行替換.