Javascript I'；我正在尝试更改图像'；单击右箭头时显示源。然而，图像变为；“未定义”； //使用的图像。 var imageData=”https://i.vimeocdn.com/video/246976999_640.jpg" var imageData1=“AHR0CDOVL2Z1BNRPBWVZBMV3CY5JB20VD3ATY29UDGVUDC91CGXVYWRZLZIWMTUVMDCVU2VHLUJ1BM5PZXMTQXJLLUXHDGVZDCMF6ZS1JBI1KYXBHBI1GB3ITQXF1YXJPDW0TVGFUA3MSTM5QCGC=”； var imageData2=”http://celebratewomantoday.com/wp-content/uploads/2015/03/Chirpy-Duckling-sitting-on-box-3.jpg"; var imageData3=”http://www.name-list.net/img/portrait/Hamster_3.jpg"; var imageData4=”http://3.bp.blogspot.com/-4FGnh3WIdTE/Th7-yF2W8QI/AAAAAAAAARM/2ZR1zx6WWe4/s1600/Puffer+鱼.jpg",； //包含图像的数组，以便可以对其进行迭代 var allImages=[imageData，imageData1，imageData2，imageData3，imageData4]； var计数=1； $（“#右”）。单击（函数（）{ 如果（计数小于5）{ document.getElementById（“hello”）.src=allImages[count]； 计数++； } }); var image=新图像（）； var can=document.createElement（'CANVAS'）； var ctx=can.getContext（'2d'）； 罐高=63； 罐宽=80； previewDataURL=document.getElementById（“hello”）.src； image.onload=函数（）{ drawImage（这个，0，0，80，63）； //新裁剪图像的base64 document.getElementById（“normalPic”）.src=can.toDataURL（“image/jpeg”，0.5）； document.getElementById（“vintagePic”）.src=can.toDataURL（“image/jpeg”，0.5）； document.getElementById（“lomoPic”）.src=can.toDataURL（“image/jpeg”，0.5）； document.getElementById（“clarityPic”）.src=can.toDataURL（“image/jpeg”，0.5）； document.getElementById（“sinCityPic”）.src=can.toDataURL（“image/jpeg”，0.5）； document.getElementById（“sunrisePic”）.src=can.toDataURL（“image/jpeg”，0.5）； document.getElementById（“crossProcessPic”）.src=can.toDataURL（“image/jpeg”，0.5）； document.getElementById（“orangePeelPic”）.src=can.toDataURL（“image/jpeg”，0.5）； document.getElementById（“lovePic”）.src=can.toDataURL（“image/jpeg”，0.5）； document.getElementById（“grungyPic”）.src=can.toDataURL（“image/jpeg”，0.5）； document.getElementById（“jarquesPic”）.src=can.toDataURL（“image/jpeg”，0.5）； document.getElementById（“pinholePic”）.src=can.toDataURL（“image/jpeg”，0.5）； document.getElementById（“oldBootPic”）.src=can.toDataURL（“image/jpeg”，0.5）； document.getElementById（“glowingsunic”）.src=can.toDataURL（“image/jpeg”，0.5）； document.getElementById（“hazyDaysPic”）.src=can.toDataURL（“image/jpeg”，0.5）； document.getElementById（“herMajestyPic”）.src=can.toDataURL（“image/jpeg”，0.5）； document.getElementById（“怀旧”）.src=can.toDataURL（“image/jpeg”，0.5）； document.getElementById（“hemingwayPic”）.src=can.toDataURL（“image/jpeg”，0.5）； document.getElementById（“concentratePic”）.src=can.toDataURL（“image/jpeg”，0.5）； }; image.src=document.getElementById（“hello”）.src；

因此，我在这里试图实现的是，当用户单击右键时，将显示阵列中的下一张照片

---

我之前在右键单击函数中添加了

console.log（document.getElementById（“hello”）.src）

，以查看“hello”的源是否正在更改，是否已更改。我还在

image.onload

函数之后添加了

console.log（document.getElementById（“hello”）.src）

，并收到“undefined”。我做错了什么？

看起来count被初始化为1，这是数组中的第二个元素。该特定元素没有正确的地址

（“ahr0cdovl2z1bnpbwvzbmv3cy5jb20vd3aty29udgvudc91cgxvywrzlziwmtuvmdcvu2vhluj1bm5pzxmtqxjlluxhdgvzdcc1dcmf6zs1jbi1kyxbhbi1gitqf1yxjxjpdw0tvgfua3mts5qcgc=”）
看起来计数初始化为1，这是数组中的第二个元素。该特定元素没有正确的地址
（“AHR0CDOVL2Z1BNRPBWVZBMV3CY5JB20VD3ATY29UDGVUDC91CGXVYWRZLZIWMTUVMDCVU2VHLUJ1BM5PZXMTQXJLLUXHDGVZDCMF6ZS1JBI1KYXBHBI1GB3ITQXF1YXJPDW0TVGFUA3MTMS5QCGC=”）
此映像是base64映像，使用时应添加数据类型：

//images used. 

var imageData = "https://i.vimeocdn.com/video/246976999_640.jpg"
var imageData1 = "aHR0cDovL2Z1bnRpbWVzbmV3cy5jb20vd3AtY29udGVudC91cGxvYWRzLzIwMTUvMDcvU2VhLUJ1bm5pZXMtQXJlLUxhdGVzdC1DcmF6ZS1Jbi1KYXBhbi1Gb3ItQXF1YXJpdW0tVGFua3MtMS5qcGc=";
var imageData2 = "http://celebratewomantoday.com/wp-content/uploads/2015/03/Chirpy-Duckling-sitting-on-box-3.jpg";
var imageData3 = "http://www.name-list.net/img/portrait/Hamster_3.jpg";
var imageData4 = "http://3.bp.blogspot.com/-4FGnh3WIdTE/Th7-yF2W8QI/AAAAAAAAARM/2ZR1zx6WWe4/s1600/Puffer+Fish.jpg";

//array containing the images so that they can be iterated

var allImages = [imageData, imageData1, imageData2, imageData3, imageData4];
var count = 1;

$("#right").click(function() {
  if (count < 5){
  document.getElementById("hello").src = allImages[count];
  count++;
  }
});

var image = new Image();


var can = document.createElement('CANVAS');
var ctx = can.getContext('2d');

can.height = 63;
can.width = 80;

previewDataURL = document.getElementById("hello").src;

image.onload = function() {
    ctx.drawImage(this, 0, 0, 80, 63);
    //new cropped image's base64 
    document.getElementById("normalPic").src = can.toDataURL("image/jpeg", 0.5);
    document.getElementById("vintagePic").src = can.toDataURL("image/jpeg", 0.5);
    document.getElementById("lomoPic").src = can.toDataURL("image/jpeg", 0.5);
    document.getElementById("clarityPic").src = can.toDataURL("image/jpeg", 0.5);
    document.getElementById("sinCityPic").src = can.toDataURL("image/jpeg", 0.5);
    document.getElementById("sunrisePic").src = can.toDataURL("image/jpeg", 0.5);
    document.getElementById("crossProcessPic").src = can.toDataURL("image/jpeg", 0.5);
    document.getElementById("orangePeelPic").src = can.toDataURL("image/jpeg", 0.5);
    document.getElementById("lovePic").src = can.toDataURL("image/jpeg", 0.5);
    document.getElementById("grungyPic").src = can.toDataURL("image/jpeg", 0.5);
    document.getElementById("jarquesPic").src = can.toDataURL("image/jpeg", 0.5);
    document.getElementById("pinholePic").src = can.toDataURL("image/jpeg", 0.5);
    document.getElementById("oldBootPic").src = can.toDataURL("image/jpeg", 0.5);
    document.getElementById("glowingSunPic").src = can.toDataURL("image/jpeg", 0.5);
    document.getElementById("hazyDaysPic").src = can.toDataURL("image/jpeg", 0.5);
    document.getElementById("herMajestyPic").src = can.toDataURL("image/jpeg", 0.5);
    document.getElementById("nostalgiaPic").src = can.toDataURL("image/jpeg", 0.5);
    document.getElementById("hemingwayPic").src = can.toDataURL("image/jpeg", 0.5);
    document.getElementById("concentratePic").src = can.toDataURL("image/jpeg", 0.5);
};
image.src = document.getElementById("hello").src ;

此映像是base64映像，要使用它，应添加数据类型：

//images used. 

var imageData = "https://i.vimeocdn.com/video/246976999_640.jpg"
var imageData1 = "aHR0cDovL2Z1bnRpbWVzbmV3cy5jb20vd3AtY29udGVudC91cGxvYWRzLzIwMTUvMDcvU2VhLUJ1bm5pZXMtQXJlLUxhdGVzdC1DcmF6ZS1Jbi1KYXBhbi1Gb3ItQXF1YXJpdW0tVGFua3MtMS5qcGc=";
var imageData2 = "http://celebratewomantoday.com/wp-content/uploads/2015/03/Chirpy-Duckling-sitting-on-box-3.jpg";
var imageData3 = "http://www.name-list.net/img/portrait/Hamster_3.jpg";
var imageData4 = "http://3.bp.blogspot.com/-4FGnh3WIdTE/Th7-yF2W8QI/AAAAAAAAARM/2ZR1zx6WWe4/s1600/Puffer+Fish.jpg";

//array containing the images so that they can be iterated

var allImages = [imageData, imageData1, imageData2, imageData3, imageData4];
var count = 1;

$("#right").click(function() {
  if (count < 5){
  document.getElementById("hello").src = allImages[count];
  count++;
  }
});

var image = new Image();


var can = document.createElement('CANVAS');
var ctx = can.getContext('2d');

can.height = 63;
can.width = 80;

previewDataURL = document.getElementById("hello").src;

image.onload = function() {
    ctx.drawImage(this, 0, 0, 80, 63);
    //new cropped image's base64 
    document.getElementById("normalPic").src = can.toDataURL("image/jpeg", 0.5);
    document.getElementById("vintagePic").src = can.toDataURL("image/jpeg", 0.5);
    document.getElementById("lomoPic").src = can.toDataURL("image/jpeg", 0.5);
    document.getElementById("clarityPic").src = can.toDataURL("image/jpeg", 0.5);
    document.getElementById("sinCityPic").src = can.toDataURL("image/jpeg", 0.5);
    document.getElementById("sunrisePic").src = can.toDataURL("image/jpeg", 0.5);
    document.getElementById("crossProcessPic").src = can.toDataURL("image/jpeg", 0.5);
    document.getElementById("orangePeelPic").src = can.toDataURL("image/jpeg", 0.5);
    document.getElementById("lovePic").src = can.toDataURL("image/jpeg", 0.5);
    document.getElementById("grungyPic").src = can.toDataURL("image/jpeg", 0.5);
    document.getElementById("jarquesPic").src = can.toDataURL("image/jpeg", 0.5);
    document.getElementById("pinholePic").src = can.toDataURL("image/jpeg", 0.5);
    document.getElementById("oldBootPic").src = can.toDataURL("image/jpeg", 0.5);
    document.getElementById("glowingSunPic").src = can.toDataURL("image/jpeg", 0.5);
    document.getElementById("hazyDaysPic").src = can.toDataURL("image/jpeg", 0.5);
    document.getElementById("herMajestyPic").src = can.toDataURL("image/jpeg", 0.5);
    document.getElementById("nostalgiaPic").src = can.toDataURL("image/jpeg", 0.5);
    document.getElementById("hemingwayPic").src = can.toDataURL("image/jpeg", 0.5);
    document.getElementById("concentratePic").src = can.toDataURL("image/jpeg", 0.5);
};
image.src = document.getElementById("hello").src ;

codepen-其中一个图像URL错误，即获取空白图像数据1-AHR0CDOVL2Z1BNRPBWVZBMV3CY5JB20VD3ATY29UDGVUDC91CGXVYWRZLZIWMTUVMDCVU2VHLUJ1BM5PZXMTQJLLUXHDGVZDCZDCMF6ZS1JBI1KYXBHBI1GB3ITQXF1YXJPDW0TVGFUA3MSTM5QCGC=
imageData1
无效，需要从
数据开始：image/png；base64，
codepen-其中一个图像URL是错误的，即获取空白图像数据1-AHR0CDOVL2Z1BNRPBWVZBMV3CY5JB20VD3ATY29UDGVUDC91CGXVYWRZLZIWMTUVMDCVU2VHLUJ1BM5PZXMTQXJLLUXHDGVZDCC1DCMF6ZS1JBI1KYXBHBI1GB3ITQXF1YXJPDW0TFUA3MTMS5QCGC=
imageData1
无效，它需要从
数据开始：image/png；base64，
谢谢，我更改了URL。但是仍然不起作用：（谢谢，我更改了URL。但是仍然不起作用：(