js drawImage 下面代码可在IE响应，在chrome和FF不行，如何修改

最新推荐文章于 2024-03-07 07:24:47 发布
最新推荐文章于 2024-03-07 07:24:47 发布
阅读量530 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014623692/article/details/24517209
版权 
js drawImage 下面代码可在IE响应，在chrome和FF不行，如何修改
var img=new Image();

img.src="http://localhost:8000/db/anchor.png";			
ctx.drawImage(img,-6.5 + (ring[0].x  - box.x) * sc, -23 + canvas.height - (ring[0].y - box.y) * sc);
它外面是个for循环 

 

如果里面加个img.onload即可在chorme响应
本来for循环是画4个图形的，但只能画出最后一个

                

        

        

    

  


    

      

        

            

              
                
                  思想围城
                
              
            

            

                关注
              
            

        

        

          
      

      









                



	

		

			

				
					
js HTML5 canvas绘制图片的方法

				
			

			

				

					01-19
				

			

		

		

			
				
本文实例为大家分享了HTML5 canvas绘制图片的具体代码，供大家参考，具体内容如下
demo.js

[removed]=function() {
  createcanvas();
  drawImage();
}
 function createcanvas() {
   var CANVAS=document.getElementById('mycanvas');
   context=CANVAS.getContext('2d');
 }
function drawImage() {
  var img=new Image();
  img.onload=function

			
		

	



                

              
                



	

		

			

				
					
[js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern)

				
			

			

				

					weixin_34177064的博客
				

				

					09-27
					
					251
					
				

			

		

		

			
				
 接着上文[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)继续，本文介绍的内容是canvas开发，特别是游戏中，比较常用的内容：图片处理。在游戏中的资源大多数都是加载图片.
一、canvas怎么加载图片？
canvas提供3种图片加载的API调用方式.
drawIm...

			
		

	



                


  
              

                


	

		

			

				
					
js 图片打碎_js drawImage如何产生图片撕裂闪烁，如下代码的逻辑是如何实现的

				
			

			

				

					weixin_35748716的博客
				

				

					12-30
					
					183
					
				

			

		

		

			
				
Evilzone - Hacking and Security Networkbody {height: 100%;width: 100%;margin: 0;padding: 0;background-color: #191919;font-family: Arial, Helvetica, sans-serif;}.box {color: #c8c8c8;padding: 20px;margi...

			
		

	





	

		

			

				
					
前端JS利用canvas的drawImage()对图片进行压缩

				
			

			

				

					alize的博客
				

				

					12-03
					
					3781
					
				

			

		

		

			
				
HTML5 file API加canvas实现图片前端JS压缩
要想使用JS实现图片的压缩效果，原理其实很简单，核心API就是使用canvas的drawImage()方法；
canvas的drawImage()方法API如下：
context.drawImage(img, dx, dy);
context.drawImage(img, dx, dy, dWidth, dHeight);
context.drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidt

			
		

	



		

			
		



	

		

			

				
					
JS控制图片翻转示例代码(兼容firefox,ie,chrome)

				
			

			

				

					12-12
				

			

		

		

			
				
lt: case 0: c.width = img.width; c.height = img.height;... } ccanvasContext.drawImage(img, 0, 0, img.width, img.height); img.style.display = ‘none’; c.style.display = ‘block’; } } </script> </head> 

			
		

	





	

		

			

				
					
【JavaScript源代码】JavaScript 如何在浏览器中使用摄像头.docx

				
			

			

				

					12-29
				

			

		

		

			
				
### JavaScript在浏览器中使用摄像头的方法  #### 一、获取摄像头权限  在开发Web应用程序时，如果需要使用到用户的摄像头或麦克风，首先需要通过`navigator.mediaDevices.getUserMedia()`方法请求相应的权限。为了...

			
		

	





	

		

			

				
					
javascript图片预览和上传（兼容IE）

				
			

			

				

					12-01
				

			

		

		

			
				
在JavaScript中，图片预览和上传是常见的功能需求，尤其在网页交互中。本文将深入探讨如何使用JavaScript实现这一功能，并兼容Internet Explorer浏览器。在实际的网页开发中，考虑到浏览器兼容性是至关重要的，因为...

			
		

	





	

		

			

				
					
360度全景图-HTML5 Canvas实现/支持chrome/FF/IE9+

				
			

			

				

					05-04
				

			

		

		

			
				
例如，`context.drawImage()`方法用于在Canvas上绘制图像，我们可以用它来加载全景图像，并根据视角和缩放级别进行适当的裁剪和绘制。此外，可能还需要使用`translate()`和`rotate()`方法来改变Canvas绘图坐标系统，...

			
		

	





	

		

			

				
					
IE浏览器下drawImage需要注意的问题

				
			

			

				

					baidu_36788549的博客
				

				

					09-06
					
					655
					
				

			

		

		

			
				
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
img	规定要使用的图像、画布或视频。
sx	可选。开始剪切的 x 坐标位置。
sy	可选。开始剪切的 y 坐标位置。
swidth	可选。被剪切图像的宽度。
sheight	可选。被剪切图像的高度。
x	在画布上放置图像的 x 坐标位置。
y	在画布上放置图像的 y 坐标位...

			
		

	





	

		

			

				
					
js使用canvas的drawImage()绘制图片不显示

				
			

			

				

					王明海的专栏
				

				

					12-18
					
					9596
					
				

			

		

		

			
				
起因：
在使用canvas绘制图片时，发现根据w3cschool里面的绘制代码绘制图片显示不出来。
示例代码如下：
&lt;script type="text/javascript"&gt;

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="flo...

			
		

	





	

		

			

				
					
javascript基础学习系列二百九十四：绘制图像

					
最新发布

				
			

			

				

					m0_68635815的博客
				

				

					03-07
					
					800
					
				

			

		

		

			
				
2D 绘图上下文内置支持操作图像。如果想把现有图像绘制到画布上，可以使用 drawImage()方法。这个方法可以接收 3 组不同的参数，并产生不同的结果。最简单的调用是传入一个 HTML 的元素， 以及表示绘制目标的 x 和 y 坐标，结果是把图像绘制到指定位置。以上代码获取了文本中的第一个图像，然后在画布上的坐标(10, 10)处将它绘制了出来。绘制出来的 图像与原来的图像一样大。如果想改变所绘制图像的大小，可以再传入另外两个参数:目标宽度和目标 高度。

			
		

	





	

		

			

				
					
通过js画图，canvas.DrawImage()绘制网络图片无效

				
			

			

				

					qq_23009739的博客
				

				

					12-10
					
					2926
					
				

			

		

		

			
				
网上讲解许多什么图片必须加载到本地才可以绘图，其实不然，其实就是网络图片还没有加载完就开始使用DrawImage方法了，肯定无法加载了

问题定位
原代码：
var work = document.getElementById('demoId');
var ctx = work.getContext('2d');
ctx.drawImage('https://xxxxxxx.com/demo.jpg', 0, 0,750,1334);

问题是出在drawImage所需的图片文件还没有加载完，就已经执行了.

			
		

	





	

		

			

				
					
在html5中drawimage,HTML5中drawImage用法分析

				
			

			

				

					weixin_34008445的博客
				

				

					06-30
					
					270
					
				

			

		

		

			
				
本文实例分析了HTML5中drawImage使用时遇到的问题及解决方法。分享给大家供大家参考。具体分析如下：使用Image遇到的问题：复制代码代码如下:$(function() {var jsCanv = document.getElementById("canv");var oCanv = jsCanv.getContext("2d");var img = new Image();img.src...

			
		

	





	

		

			

				
					
如何使用js对图像进行压缩

				
			

			

				

					忧郁的蛋的专栏
				

				

					07-05
					
					9002
					
				

			

		

		

			
				
JavaScript 可以使用类似于 canvas 和 web workers 来实现图像压缩。使用 canvas，可以将图像绘制到 canvas 上，然后使用 canvas 提供的 toBlob() 或 toDataURL() 方法将其转换为不同格式的图像。在这些方法中指定图像质量参数即可实现压缩。使用 web workers，可以在后台执行图像压缩，以避免阻塞 UI 线程。

			
		

	





	

		

			

				
					
js系列教程10-canvas绘图全解

				
			

			

				

					全栈工程师开发手册（原创）https://github.com/tencentmusic/cube-studio
				

				

					08-09
					
					9870
					
				

			

		

		

			
				
var mycanvas = document.getElementById("mycanvas");
if(mycanvas.getContext){                        //判断浏览器是否支持
    var context = mycanvas.getContext("2d");    //context是画布，getContext获取绘图上下文对象，也有名为WebG

			
		

	





	

		

			

				
					
canvas基于不同浏览器的drawImage兼容性问题

				
			

			

				

					weixin_33769207的博客
				

				

					03-07
					
					983
					
				

			

		

		

			
				
2019独角兽企业重金招聘Python工程师标准>>>   
                                        
         ...

			
		

	





	

		

			

				
					
IE下canvas使用问题归集

					
热门推荐

				
			

			

				

					每天=生命的最后一天
				

				

					03-29
					
					1万+
					
				

			

		

		

			
				
1.同一页HTML要兼容低版本IE，需要在HTML header里包括：
    
    
    
    
    
2.动态生成的Canvas对象将不支持getContext方法,
  要使IE中的Canvas对象支持getContext等方法需要调用excanvas中的G_vmlCanvasManager_.initElement方法,由于最后的
 G_vmlCanvas

			
		

	





	

		

			

				
					
JavaScript 实用函数集锦：15个高效代码示例

				
			

			

				

					
				

			

		

		

			
				
1. **调整图片大小，保持比例（FFIE兼容）**  使用`DrawImage`函数可以在不同浏览器中调整图片大小而不改变其原始比例。通过比较原始图片与目标尺寸的比例，动态计算出适应的新尺寸。  2. **控制textarea区域文字...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值